feat: useToggle hook (#3)

feat: useToggle hook

Author: xobotyi

.eslintrc.js

@@ -51,5 +51,33 @@ module.exports = {
 
     'import/prefer-default-export': 'off',
     'import/no-default-export': 'error',
+
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: ['interface', 'typeAlias'],
+        format: ['PascalCase'],
+        prefix: ['I'],
+      },
+      {
+        selector: 'function',
+        format: ['camelCase'],
+      },
+      {
+        selector: 'variable',
+        format: ['camelCase', 'UPPER_CASE'],
+        leadingUnderscore: 'allow',
+      },
+      {
+        selector: 'parameter',
+        format: ['camelCase'],
+        leadingUnderscore: 'allow',
+      },
+      {
+        selector: 'parameter',
+        format: ['camelCase'],
+        leadingUnderscore: 'allow',
+      },
+    ],
   },
 };

src/index.ts

@@ -2,3 +2,4 @@ export { useFirstMountState } from './useFirstMountState';
 export { useMountEffect } from './useMountEffect';
 export { useUpdateEffect } from './useUpdateEffect';
 export { useUnmountEffect } from './useUnmountEffect';
+export { useToggle } from './useToggle';

src/useToggle.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+import { IInitialState, INewState, resolveHookState } from './util/resolveHookState';
+
+export function useToggle(
+  initialState: IInitialState<boolean> = false
+): [boolean, (nextState?: INewState<boolean>) => void] {
+  // We dont use useReducer (which would end up with less code), because exposed
+  // action does not provide functional updates feature.
+  // Therefore we have to create and expose our own state setter with
+  // toggle logic.
+  const [state, _setState] = useState(initialState);
+
+  return [
+    state,
+    useCallback((nextState) => {
+      _setState((prevState) => {
+        if (typeof nextState === 'undefined') {
+          return !prevState;
+        }
+
+        return Boolean(resolveHookState(nextState, prevState));
+      });
+    }, []),
+  ];
+}

src/util/resolveHookState.ts

@@ -0,0 +1,10 @@
+export type IInitialState<S> = S | (() => S);
+export type INewState<S> = S | ((prevState: S) => S);
+
+export function resolveHookState<S>(nextState: IInitialState<S>): S;
+export function resolveHookState<S>(nextState: INewState<S>, prevState: S): S;
+export function resolveHookState<S>(nextState: IInitialState<S> | INewState<S>, prevState?: S): S {
+  if (typeof nextState === 'function') return (nextState as CallableFunction)(prevState);
+
+  return nextState;
+}

tests/dom/useToggle.ts

@@ -0,0 +1,61 @@
+import { act, renderHook } from '@testing-library/react-hooks/dom';
+import { useToggle } from '../../src';
+
+describe('useToggle', () => {
+  it('should be defined', () => {
+    expect(useToggle).toBeDefined();
+  });
+
+  it('should default to false', () => {
+    const { result } = renderHook(() => useToggle());
+
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should be instantiatable with value', () => {
+    let { result } = renderHook(() => useToggle(true));
+    expect(result.current[0]).toBe(true);
+
+    result = renderHook(() => useToggle(() => true)).result;
+    expect(result.current[0]).toBe(true);
+
+    result = renderHook(() => useToggle(() => false)).result;
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should change state to the opposite when toggler called without args or undefined', () => {
+    const { result } = renderHook(() => useToggle());
+    act(() => {
+      result.current[1]();
+    });
+    expect(result.current[0]).toBe(true);
+
+    act(() => {
+      result.current[1](undefined);
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should change state to one that passed to toggler', () => {
+    const { result } = renderHook(() => useToggle());
+    act(() => {
+      result.current[1](false);
+    });
+    expect(result.current[0]).toBe(false);
+
+    act(() => {
+      result.current[1](true);
+    });
+    expect(result.current[0]).toBe(true);
+
+    act(() => {
+      result.current[1](() => false);
+    });
+    expect(result.current[0]).toBe(false);
+
+    act(() => {
+      result.current[1](() => true);
+    });
+    expect(result.current[0]).toBe(true);
+  });
+});

tests/dom/util/resolveHookState.ts

@@ -0,0 +1,28 @@
+import { resolveHookState } from '../../../src/util/resolveHookState';
+
+describe('resolveHookState', () => {
+  it('it should be defined', () => {
+    expect(resolveHookState).toBeDefined();
+  });
+
+  it('should return value itself if it is not function', () => {
+    expect(resolveHookState(123)).toBe(123);
+
+    const obj = { foo: 'bar' };
+    expect(resolveHookState(obj)).toBe(obj);
+  });
+
+  it('should return call result in case function received', () => {
+    expect(resolveHookState(() => 123)).toBe(123);
+
+    const obj = { foo: 'bar' };
+    expect(resolveHookState(() => obj)).toBe(obj);
+  });
+
+  it('should pass second parameter to received function', () => {
+    expect(resolveHookState((state) => state, 123)).toBe(123);
+
+    const obj = { foo: 'bar' };
+    expect(resolveHookState((state) => state, obj)).toBe(obj);
+  });
+});

tests/ssr/useToggle.ts

@@ -0,0 +1,38 @@
+import { act, renderHook } from '@testing-library/react-hooks/server';
+import { useToggle } from '../../src';
+
+describe('useToggle', () => {
+  it('should be defined', () => {
+    expect(useToggle).toBeDefined();
+  });
+
+  it('should default to false', () => {
+    const { result } = renderHook(() => useToggle());
+
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should be instantiatable with value', () => {
+    let { result } = renderHook(() => useToggle(true));
+    expect(result.current[0]).toBe(true);
+
+    result = renderHook(() => useToggle(() => true)).result;
+    expect(result.current[0]).toBe(true);
+
+    result = renderHook(() => useToggle(() => false)).result;
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should not change if toggler called', () => {
+    const { result } = renderHook(() => useToggle());
+    act(() => {
+      result.current[1]();
+    });
+    expect(result.current[0]).toBe(false);
+
+    act(() => {
+      result.current[1](true);
+    });
+    expect(result.current[0]).toBe(false);
+  });
+});

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "module": "ESNext",
+    "moduleResolution": "Node",
     "target": "ESNext",
     "lib": [
       "ESNext",