diff options
Diffstat (limited to 'src/utils/hooks/use-boolean')
| -rw-r--r-- | src/utils/hooks/use-boolean/index.ts | 1 | ||||
| -rw-r--r-- | src/utils/hooks/use-boolean/use-boolean.test.ts | 45 | ||||
| -rw-r--r-- | src/utils/hooks/use-boolean/use-boolean.ts | 44 |
3 files changed, 90 insertions, 0 deletions
diff --git a/src/utils/hooks/use-boolean/index.ts b/src/utils/hooks/use-boolean/index.ts new file mode 100644 index 0000000..a210294 --- /dev/null +++ b/src/utils/hooks/use-boolean/index.ts @@ -0,0 +1 @@ +export * from './use-boolean'; diff --git a/src/utils/hooks/use-boolean/use-boolean.test.ts b/src/utils/hooks/use-boolean/use-boolean.test.ts new file mode 100644 index 0000000..22d3cdc --- /dev/null +++ b/src/utils/hooks/use-boolean/use-boolean.test.ts @@ -0,0 +1,45 @@ +import { describe, expect, it } from '@jest/globals'; +import { act, renderHook } from '@testing-library/react'; +import { useBoolean } from './use-boolean'; + +describe('use-boolean', () => { + it('returns the initial state', () => { + const initialState = true; + const { result } = renderHook(() => useBoolean(initialState)); + + expect(result.current.state).toBe(initialState); + }); + + it('can set the state to false', () => { + const { result } = renderHook(() => useBoolean()); + + act(() => { + result.current.deactivate(); + }); + + expect(result.current.state).toBe(false); + }); + + it('can set the state to true', () => { + const { result } = renderHook(() => useBoolean()); + + act(() => { + result.current.activate(); + }); + + expect(result.current.state).toBe(true); + }); + + it('can switch the state', () => { + const initialState = true; + const { result } = renderHook(() => useBoolean(initialState)); + + expect(result.current.state).toBe(initialState); + + act(() => { + result.current.toggle(); + }); + + expect(result.current.state).toBe(!initialState); + }); +}); diff --git a/src/utils/hooks/use-boolean/use-boolean.ts b/src/utils/hooks/use-boolean/use-boolean.ts new file mode 100644 index 0000000..35cb00c --- /dev/null +++ b/src/utils/hooks/use-boolean/use-boolean.ts @@ -0,0 +1,44 @@ +import { useCallback, useState } from 'react'; + +export type UseBooleanReturn = { + /** + * Set state as true. + */ + activate: () => void; + /** + * Set state as false. + */ + deactivate: () => void; + /** + * Current state. + */ + state: boolean; + /** + * Switch state. + */ + toggle: () => void; +}; + +/** + * React hook to deal with boolean states. + * + * @param {boolean} [initialState] - The initial state. + * @returns {UseBooleanReturn} The state and utility functions to update it. + */ +export const useBoolean = (initialState = false): UseBooleanReturn => { + const [state, setState] = useState(initialState); + + const activate = useCallback(() => { + setState(true); + }, []); + + const deactivate = useCallback(() => { + setState(false); + }, []); + + const toggle = useCallback(() => { + setState((prevState) => !prevState); + }, []); + + return { activate, deactivate, state, toggle }; +}; |
