jaredpalmer / React Persist
Licence: mit
💾 Persist and rehydrate React state to localStorage.
Stars: ✭ 121
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Persist
Localdb
MongoDB on the browser. A database using Javascript localStorage
Stars: ✭ 67 (-44.63%)
Mutual labels: localstorage
Js Integration Examples
Examples of common uses of ports and web components
Stars: ✭ 90 (-25.62%)
Mutual labels: localstorage
Checklist Tools Website
🍿 The perfect Checklist Website for meticulous developers.
Stars: ✭ 73 (-39.67%)
Mutual labels: localstorage
Theme Builder
The theming system helps you in building a theme of your choice and apply it to test live. Why wait? Just give it a try.
Stars: ✭ 82 (-32.23%)
Mutual labels: localstorage
Vue Preferences
The coolest and easiest way to manage your user's preferences on the client side with your preferred storage. Check out sample app here:
Stars: ✭ 96 (-20.66%)
Mutual labels: localstorage
Re Frame Storage
re-frame interceptors for browser local storage
Stars: ✭ 44 (-63.64%)
Mutual labels: localstorage
Hermes
Client-side messaging channel for sending data from one browser tab to another
Stars: ✭ 111 (-8.26%)
Mutual labels: localstorage
Jsql
jSQL is the "official" Javascript Query Language - A database written in Javascript for use in a browser or Node.
Stars: ✭ 85 (-29.75%)
Mutual labels: localstorage
Vlf
A Vue plugin from localForage.vue-localForage or vlf
Stars: ✭ 99 (-18.18%)
Mutual labels: localstorage
React Easy Params
🔗 Auto synchronize your state with the URL and LocalStorage.
Stars: ✭ 73 (-39.67%)
Mutual labels: localstorage
Retrospectify
An awesome tool for retrospecting, written in Vue
Stars: ✭ 97 (-19.83%)
Mutual labels: localstorage
Bin
A tiny (<1kb) localStorage and sessionStorage helper library.
Stars: ✭ 70 (-42.15%)
Mutual labels: localstorage
Recoil Persist
Package for recoil state manager to persist and rehydrate store
Stars: ✭ 66 (-45.45%)
Mutual labels: localstorage
Shopping App With Cart Flutter Demo
Shopping cart : uses sqlite for storage
Stars: ✭ 93 (-23.14%)
Mutual labels: localstorage
Omega
Real-time issue tracker optimized for small teams
Stars: ✭ 115 (-4.96%)
Mutual labels: localstorage
Office Js Helpers
[ARCHIVED] A collection of helpers to simplify development of Office Add-ins & Microsoft Teams Tabs
Stars: ✭ 111 (-8.26%)
Mutual labels: localstorage
Nuxt Storage
🛢 Utilities for easy read and write browser's storage in Nuxt.js project
Stars: ✭ 98 (-19.01%)
Mutual labels: localstorage
React Persist 💾
Persist and rehydrate React state to localStorage.
npm install react-persist --save
Basic Usage
Just import the <Persist >
component and pass it the data you want it to persist. It renders null
, so it can go wherever you need it to....
import React from 'react'
import { Persist } from 'react-persist'
class Signup extends React.Component {
state = {
firstName: '',
lastName: '',
email: '',
isLoading: false,
error: null
};
// ...
render() {
return (
<form onSubmit={this.handleSubmit}>
{/* whatever....*/}
<Persist
name="signup-form"
data={this.state}
debounce={500}
onMount={data => this.setState(data)}
/>
</form>
)
}
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 is300
. -
onMount: (data: any) => void
: (optionally) Hydrate your data (into React state). Will only be called if data is notnull
.
Author
- Jared Palmer @jaredpalmer
Todo
- Alternative storages (localForage, sessionStorage)
- Support AsyncStorage for React Native
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].