react-persistent-state

Tools to simply persist component state in the local storage.

$3

``
npm install --save react-persistant-state
`
or
`
npm install --save https://github.com/alexandreannic/react-persistent-state.git
`

$3

#### From class component

Simply extend PersistentComponent from react-persistent-state instead of Component from react.

import React from 'react'
import {PersistentComponent} from 'react-persistent-state'

export class PersistentInput extends PersistentComponent {
state = {
value: '',
}

handleChange = event => {
this.setState({value: event.target.value})
}

render() {
return (


Use usePersistentState instead of useState.
It works the same except that it exposes another method to clear related local storage save.

import React from 'react'
import {usePersistentState} from 'react-persistent-state'

export function PersistentCounterHook() {
const [value, setValue, unpersist] = usePersistentState(0)
return (


When a component with persistant state is used multiples times inside a same component, react-persistent-state is not able to generate an unique key
to distinguish them from the local storage.

In this case you must provide an unique key` as shown below:

#### Usage

function App() {
return (
<>



)
}

#### Class component implementation

export class Persistent extends PersistentComponent {
constructor(props) {
super(props, props.persistentKey)
}
...
}

#### Functional component implementation

export const Persistent = ({persistentKey}) => {
const [value, setValue, clearValue] = usePersistentState(0, persistentKey)
...
}