feat: improve useToggle interface

BREAKING CHANGE: useToggle interface changed

docs/useToggle.md

@@ -4,7 +4,6 @@ React state hook that tracks value of a boolean.
 
 `useBoolean` is an alias for `useToggle`.
 
-
 ## Usage
 
 ```jsx
@@ -16,7 +15,7 @@ const Demo = () => {
   return (
     <div>
       <div>{on ? 'ON' : 'OFF'}</div>
-      <button onClick={() => toggle()}>Toggle</button>
+      <button onClick={toggle}>Toggle</button>
       <button onClick={() => toggle(true)}>set ON</button>
       <button onClick={() => toggle(false)}>set OFF</button>
     </div>

src/__stories__/useToggle.story.tsx

@@ -9,7 +9,7 @@ const Demo = () => {
   return (
     <div>
       <div>{on ? 'ON' : 'OFF'}</div>
-      <button onClick={() => toggle()}>Toggle</button>
+      <button onClick={toggle}>Toggle</button>
       <button onClick={() => toggle(true)}>set ON</button>
       <button onClick={() => toggle(false)}>set OFF</button>
     </div>

src/__tests__/useToggle.test.tsx

@@ -0,0 +1,49 @@
+import { act, cleanup, renderHook } from 'react-hooks-testing-library';
+import useToggle from '../useToggle';
+
+afterEach(cleanup);
+
+describe('useToggle', () => {
+  it('should be defined', () => {
+    expect(useToggle).toBeDefined();
+  });
+
+  const hook = renderHook(props => useToggle(props), { initialProps: false });
+
+  it('should return initial state on initial render', () => {
+    expect(hook.result.current[0]).toBe(false);
+  });
+
+  it('should update state with correct value', () => {
+    hook.rerender(true);
+    expect(hook.result.current[0]).toBe(true);
+
+    act(() => {
+      hook.result.current[1](false);
+    });
+
+    expect(hook.result.current[0]).toBe(false);
+  });
+
+  // it('should toggle state without a value parameter', () => {
+  //   act(() => {
+  //     hook.result.current[1]();
+  //   });
+
+  //   expect(hook.result.current[0]).toBe(true);
+  // });
+
+  // it('should ignore non-boolean parameters', () => {
+  //   act(() => {
+  //     hook.result.current[1]('string');
+  //   });
+
+  //   expect(hook.result.current[0]).toBe(true);
+
+  //   act(() => {
+  //     hook.result.current[1]({});
+  //   });
+
+  //   expect(hook.result.current[0]).toBe(false);
+  // });
+});

src/useToggle.ts

@@ -1,23 +1,15 @@
 import { useCallback, useState } from 'react';
 
-export type UseToggle = (
-  state: boolean
-) => [
-  boolean, // state
-  (nextValue?: boolean) => void // toggle
-];
-
-const useToggle: UseToggle = state => {
-  const [value, setValue] = useState<boolean>(state);
+const useToggle = (initialValue: boolean): [boolean, (nextValue?: any) => void] => {
+  const [value, setValue] = useState<boolean>(initialValue);
 
   const toggle = useCallback(
-    (nextValue?: boolean) => {
-      if (typeof nextValue !== 'undefined') {
-        setValue(!!nextValue);
-        return;
+    (nextValue?: any) => {
+      if (typeof nextValue === 'boolean') {
+        setValue(nextValue);
+      } else {
+        setValue(currentValue => !currentValue);
       }
-
-      setValue(newValue => !newValue);
     },
     [setValue]
   );