feat: introduce useToggle hook (#220)

Author: div-Leo

package-lock.json

@@ -114,6 +114,7 @@
     "dependencies": {
         "@datepicker-react/hooks": "^2.3.1",
         "@styled-system/theme-get": "^5.1.2",
+        "@testing-library/react-hooks": "^8.0.0",
         "@types/react-select": "^3.0.13",
         "@types/styled-system": "^5.1.9",
         "date-fns": "^2.11.1",

package.json

@@ -0,0 +1 @@
+export { useToggle } from './useToggle';

src/hooks/index.ts

@@ -0,0 +1,52 @@
+import { act, cleanup, renderHook } from '@testing-library/react-hooks';
+
+import { useToggle } from '../useToggle';
+
+describe('useToggle hook', () => {
+    afterEach(cleanup);
+
+    it('should return boolean and a function inside the Array', () => {
+        const { result } = renderHook(() => useToggle());
+        const [value, toggle] = result.current;
+
+        expect(typeof value).toBe('boolean');
+        expect(typeof toggle).toBe('function');
+    });
+
+    it('should toggle the value', () => {
+        const { result } = renderHook(() => useToggle());
+        const [, toggle] = result.current;
+
+        expect(result.current[0]).toBe(false);
+
+        act(() => {
+            toggle();
+        });
+        expect(result.current[0]).toBe(true);
+
+        act(() => {
+            toggle();
+        });
+        expect(result.current[0]).toBe(false);
+    });
+
+    it('should set the boolean passed as argument', () => {
+        const { result } = renderHook(() => useToggle());
+        const [, toggle] = result.current;
+
+        act(() => {
+            toggle(true);
+        });
+        expect(result.current[0]).toBe(true);
+
+        act(() => {
+            toggle(true);
+        });
+        expect(result.current[0]).toBe(true);
+
+        act(() => {
+            toggle(false);
+        });
+        expect(result.current[0]).toBe(false);
+    });
+});

src/hooks/tests/useToggle.spec.ts

@@ -0,0 +1,15 @@
+import { useReducer } from 'react';
+
+export type DispatchWithOptionalAction<Type> = (_arg?: Type | unknown) => void;
+
+export type UseToggleType<Type> = [Type, DispatchWithOptionalAction<Type>];
+
+function toggle(currentValue: boolean, newValue: boolean | undefined) {
+    return typeof newValue === 'boolean' ? newValue : !currentValue;
+}
+
+function useToggle(initialValue = false): UseToggleType<boolean> {
+    return useReducer(toggle, initialValue);
+}
+
+export { useToggle };

src/hooks/useToggle.tsx

@@ -3,4 +3,5 @@ import './polyfills';
 export * from './components';
 export * from './essentials';
 export * from './icons';
+export * from './hooks';
 export { get as themeGet } from './utils/themeGet';

src/index.ts

@@ -0,0 +1,3 @@
+export { useControlledState } from './useControlledState';
+export { useGeneratedId } from './useGeneratedId';
+export { useIsEscKeyPressed } from './useIsEscKeyPressed';