https://github.com/blenderskool/react-localstorage-hooks

🔄 A collection of React hooks for reactively managing localStorage.
https://github.com/blenderskool/react-localstorage-hooks

cross-tab hooks library localstorage react reactjs sync typescript

Last synced: 3 months ago
JSON representation

🔄 A collection of React hooks for reactively managing localStorage.

• Host: GitHub
• URL: https://github.com/blenderskool/react-localstorage-hooks
• Owner: blenderskool
• License: mit
• Created: 2021-06-27T07:10:16.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-29T13:05:08.000Z (over 2 years ago)
• Last Synced: 2024-04-26T12:22:27.976Z (9 months ago)
• Topics: cross-tab, hooks, library, localstorage, react, reactjs, sync, typescript
• Language: TypeScript
• Homepage:
• Size: 79.1 KB
• Stars: 10
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


    react-localstorage-hooks

  

  


    A collection of React hooks for reactively managing localStorage.

  

  


    

      

    

    

    

    

    

  

  




### Installation


npm i react-localstorage-hooks



### Documentation

- [`useLocalStorageState`](./src/useLocalStorageState/): creates reactive state variables synced with localStorage.

- [`useLocalStorageReducer`](./src/useLocalStorageReducer/): similar to [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) but abstracted on top of localStorage.

- [`useLocalStorageSelector`](./src/useLocalStorageSelector/): hook to select some data from localStorage that automatically updates when selected data changes.

- [`createLocalStorageDispatch`](./src/createLocalStorageDispatch/): creates a dispatch method that directly updates localStorage.

### Usage

- Make sure your project is using React 16.18.0 or above.

- Install the package using `npm` or `yarn`  

  ```bash

  npm i react-localstorage-hooks

  ```

- Import the hooks either using ES6 named imports:  

  ```js

  import { useLocalStorageState } from 'react-localstorage-hooks';

  ```  

  or importing each hook directly from `lib`:

  ```js

  import useLocalStorageState from 'react-localstorage-hooks/lib/useLocalStorageState/useLocalStorageState';

  ```

  

### License

This package is licensed under [MIT](./LICENSE)