feat: add a new hook useToggle

Author: mintsweet

README.md

@@ -36,6 +36,7 @@ import { useRequest } from '@mints/hooks';
 - [useAutoRefresh](./docs/use-auto-refresh.md)
 - [useOutsideClick](./docs/use-outside-click.md)
 - [useDebounce](./docs/use-debounce.md)
+- [useToggle](./docs/use-toggle.md)
 
 ## 🌐 LICENSE
 

__test__/use-toggle.test.ts

@@ -0,0 +1,30 @@
+import { renderHook, act } from '@testing-library/react';
+
+import { useToggle } from '../src';
+
+describe('useToggle', () => {
+  it('should return the default state', () => {
+    const { result } = renderHook(() => useToggle());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should return the reverse state when the toggle is called', async () => {
+    const { result } = renderHook(() => useToggle());
+    expect(result.current[0]).toBe(false);
+
+    await act(() => {
+      result.current[1]();
+    });
+    expect(result.current[0]).toBe(true);
+  });
+
+  it('should return the default or reverse state when set a default value', async () => {
+    const { result } = renderHook(() => useToggle('Hello', 'World'));
+    expect(result.current[0]).toBe('Hello');
+
+    await act(() => {
+      result.current[1]();
+    });
+    expect(result.current[0]).toBe('World');
+  });
+});

docs/use-toggle.md

@@ -0,0 +1,29 @@
+# useToggle
+
+> A hook that toggle states.
+
+## Usage
+
+```javascript
+import { useToggle } from '@mints/hooks';
+
+const Example = () => {
+  const [state, toggle] = useToggle('Hello', 'World');
+
+  return (
+    <div>
+      <span>{state}</span>
+      <span onClick={toggle}>Toggle</span>
+    </div>
+  );
+};
+```
+
+## API
+
+```typescript
+useToggle = <T, U>(
+  defaultState: T = false as T,
+  reverseState?: U,
+): [T | U, () => void]
+```

src/index.ts

@@ -2,3 +2,4 @@ export * from './use-auto-refresh';
 export * from './use-debounce';
 export * from './use-outside-click';
 export * from './use-request';
+export * from './use-toggle';

src/use-toggle.ts

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+export const useToggle = <T, U>(
+  defaultState: T = false as T,
+  reverseState?: U,
+): [T | U, () => void] => {
+  const [state, setState] = useState<T | U>(defaultState);
+
+  const toggle = () => {
+    setState((prev) =>
+      prev === defaultState
+        ? (reverseState ?? (!defaultState as U))
+        : defaultState,
+    );
+  };
+
+  return [state, toggle];
+};