feat: add a new hook useLocalStorage

Author: mintsweet

README.md

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

__test__/use-localstorage.test.ts

@@ -0,0 +1,52 @@
+import { renderHook, act } from '@testing-library/react';
+
+import { useLocalStorage } from '../src';
+
+describe('useLocalStorage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  test('should initialize with the value from localStorage', () => {
+    localStorage.setItem('key', JSON.stringify('stored value'));
+
+    const { result } = renderHook(() =>
+      useLocalStorage('key', 'default value'),
+    );
+
+    expect(result.current[0]).toBe('stored value');
+  });
+
+  test('should initialize with the default value if localStorage is empty', () => {
+    const { result } = renderHook(() =>
+      useLocalStorage('key', 'default value'),
+    );
+
+    expect(result.current[0]).toBe('default value');
+  });
+
+  test('should update localStorage when the value changes', () => {
+    const { result } = renderHook(() =>
+      useLocalStorage('key', 'default value'),
+    );
+
+    act(() => {
+      result.current[1]('new value');
+    });
+
+    expect(localStorage.getItem('key')).toBe(JSON.stringify('new value'));
+    expect(result.current[0]).toBe('new value');
+  });
+
+  test('should initialize with the default value if localStorage is not available', () => {
+    jest.spyOn(window, 'localStorage', 'get').mockImplementation(() => {
+      throw new Error('localStorage is not available');
+    });
+
+    const { result } = renderHook(() =>
+      useLocalStorage('key', 'default value'),
+    );
+
+    expect(result.current[0]).toBe('default value');
+  });
+});

docs/use-localstorage.md

@@ -0,0 +1,28 @@
+# useLocalStorage
+
+> A Hook that store into localStorage..
+
+## Usage
+
+```javascript
+import { useState } from 'react';
+import { useLocalStorage } from '@mints/hooks';
+
+const Example = () => {
+  const [value, setValue] = useLocalStorage('key', 0);
+
+  return (
+    <div>
+      <span>{value}</span>
+      <span onClick={() => setValue(value + 1)}>Count</span>
+      <span onClick={() => setValue(0)}>Clear</span>
+    </div>
+  );
+};
+```
+
+## API
+
+```typescript
+useLocalStorage = <T>(key: string, initialValue: T): [string, (value: T): void]
+```

src/index.ts

@@ -1,5 +1,6 @@
 export * from './use-auto-refresh';
 export * from './use-debounce';
+export * from './use-localstorage';
 export * from './use-outside-click';
 export * from './use-request';
 export * from './use-toggle';

src/use-localstorage.ts

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+
+export const useLocalStorage = <T>(key: string, initialValue: T) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {}
+  };
+
+  return [storedValue, setValue];
+};