Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beenotung/react-use-storage-state
React use hook for shared and persisted state
https://github.com/beenotung/react-use-storage-state
dispatch event localstorage persistent reac-hook react shared-state
Last synced: 6 days ago
JSON representation
React use hook for shared and persisted state
- Host: GitHub
- URL: https://github.com/beenotung/react-use-storage-state
- Owner: beenotung
- License: bsd-2-clause
- Created: 2021-08-15T03:39:06.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-04-15T18:00:00.000Z (over 1 year ago)
- Last Synced: 2024-12-30T05:57:23.736Z (8 days ago)
- Topics: dispatch, event, localstorage, persistent, reac-hook, react, shared-state
- Language: TypeScript
- Homepage: https://react-use-storage-state-demo.surge.sh
- Size: 40 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-use-storage-state
> React use hook for shared and persisted state
[](https://www.npmjs.com/package/react-use-storage-state)
[](https://bundlephobia.com/package/react-use-storage-state)
[](https://bundlephobia.com/package/react-use-storage-state)
[](https://www.npmtrends.com/react-use-storage-state)
[](https://standardjs.com)
Imagine like recoil or redux without reducer and actions combined with localStorage.
This package provider simpler development experiment (DX) for shared state than redux. You can **update the shared state directly**, without writing verbose code to ~~obtain dispatcher, create action, dispatch action, construct new state in reducer, and return sub-state in selector~~.
## Features
- Auto save and restore state across page refresh
- Shared state across multiple components (realtime update)
- Familiar usage as `React.useState()`
- Auto reset state when initialState is changed
- Support any JSON-compatible data type (not just string)
- Error handling when storage permission is denied or passing non-serializable object (e.g. with cyclic reference)
- Include in-memory storage adapter [1]
**Remark**:
[1]: For state shared in the same browser tab, but isolated across different browser tab.
Demo: [https://react-use-storage-state-demo.surge.sh](https://react-use-storage-state-demo.surge.sh)
## Install
```bash
## using npm
npm install react-use-storage-state
## or using yarn
yarn add react-use-storage-state
## or using pnpm
pnpm install react-use-storage-state
```
## Typescript Signature
```typescript
export default useStorageState
export function useStorageState(
key: string,
initialState: T | (() => T),
storageArea?: Storage // default is localStorage
): [state: T, setState: (newState: T | ((prevState: T) => T)) => void];
export function createMemoryStorage(): Storage;
```
## Usage
```tsx
import React from 'react'
import { useStorageState } from 'react-use-storage-state'
const Example = () => {
const [state, setState] = useStorageState('counter', 1)
function inc() {
setState(state + 1)
}
return (
{state}
)
}
```
Details see [DemoApp.tsx](./src/DemoApp.tsx)
## License
This project is licensed with [BSD-2-Clause](./LICENSE)
This is free, libre, and open-source software. It comes down to four essential freedoms [[ref]](https://seirdy.one/2021/01/27/whatsapp-and-the-domestication-of-users.html#fnref:2):
- The freedom to run the program as you wish, for any purpose
- The freedom to study how the program works, and change it so it does your computing as you wish
- The freedom to redistribute copies so you can help others
- The freedom to distribute copies of your modified versions to others