https://github.com/jaredpalmer/react-persist
💾 Persist and rehydrate React state to localStorage.
https://github.com/jaredpalmer/react-persist
localstorage react
Last synced: 9 months ago
JSON representation
💾 Persist and rehydrate React state to localStorage.
- Host: GitHub
- URL: https://github.com/jaredpalmer/react-persist
- Owner: jaredpalmer
- License: mit
- Created: 2017-10-02T21:13:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T09:48:36.000Z (over 3 years ago)
- Last Synced: 2025-08-09T14:47:54.944Z (10 months ago)
- Topics: localstorage, react
- Language: JavaScript
- Homepage:
- Size: 166 KB
- Stars: 123
- Watchers: 5
- Forks: 10
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Persist 💾
Persist and rehydrate React state to localStorage.
```
npm install react-persist --save
```
# Basic Usage
Just import the `` component and pass it the data you want it to persist. It renders `null`, so it can go wherever you need it to....
```js
import React from 'react'
import { Persist } from 'react-persist'
class Signup extends React.Component {
state = {
firstName: '',
lastName: '',
email: '',
isLoading: false,
error: null
};
// ...
render() {
return (
{/* whatever....*/}
this.setState(data)}
/>
)
}
```
### Props
Only a few of them!
- `name: string`: LocalStorage key to save form state to
- `data: any`: Data to persist
- `debounce:? number`: Number of ms to debounce the function that saves form state. Default is `300`.
- `onMount: (data: any) => void`: (optionally) Hydrate your data (into React state). Will only be called if data is not `null`.
## Author
- Jared Palmer [@jaredpalmer](https://twitter.com/jaredpalmer)
## Todo
- Alternative storages (localForage, sessionStorage)
- Support AsyncStorage for React Native