[](https://www.npmjs.com/package/react-localstorage-helper) [](https://www.npmjs.com/package/r
npm install react-localstorage-helper



``bash`
npm install react-localstorage-helper --save
Or if you're using yarn:
``
yarn add react-localstorage-helper
Access localStorage easily inside your React component.
- Full support to use localStorage with new React Hooks β.Callback function
- Listen to changes easily just by pass a π.JSON
- No need to worry about encoding data to and decoding it back.
!react-localstorage-helper Overview
`jsx harmony
import { useLocalStorage } from 'react-localstorage-helper';
const App = () => {
const [name, setName] = useLocalStorage('__name__', 'Somebody');
const [isDark, setIsDark] = useLocalStorage('__isDark__', false);
return (
type='checkbox'
value={isDark}
onChange={() => setIsDark((preValue) => !preValue)}
/>
`
`jsx harmony
import { localStorage } from 'react-localstorage-helper';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { name: 'Somebody', isDark: false };
this.updateName = localStorage('__name__', this.state.name, (newName) => {
this.setState(newName);
});
this.updateIsDark = localStorage('__isDark__', this.state.isDark, (newIsDark) => {
this.setState({ isDark: newIsDark });
});
}
render() {
return (
type='checkbox'
value={isDark}
onChange={() => this.updateIsDark((preValue) => !preValue)}
/>
`
Class component:
`js`
this.updateValue = localStorage(key, initialValue, onValueChange);
localStorage function returns a function to update the value in the localStorage and triggers onValueChange callback function.
Function component:
`js`
const [value, setValue] = useLocalStorage(key, initialValue);
useLocalStorage() Hook returns a stateful value, and a function to update it.
During the initial render, the returned value (value) will be the same as the value passed as the secound argument (initialState) if there is no data stored in the localStorage.
The initialValue argument is the value used during the initial render if there is no stored value in the localStorage. In subsequent renders, it is disregarded. If the initial value is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:
Class component:
`js`
this.updateValue = localStorage('__key__', () => {
const initialValue = someExpensiveComputation(props);
return initialValue;
},
this.handleValueChange
);
Function component:
`js`
const [value, setValue] = useLocalStorage('__key__', () => {
const initialValue = someExpensiveComputation(props);
return initialValue;
});
. The function will receive the previous value, and return an updated value. Hereβs an example:Class component:
`js
this.updateTheme = localStorage('__theme__', 'light', this.handleValueChange);
this.updateTheme((prevValue) => (prevTheme === 'light' ? 'dark' : 'light'));
`Function component:
`js
const [them, setTheme] = useLocalStorage('__theme__', 'light');
onToggleTheme = () =>
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
``Yaman KATBY - Initial work* - Website
See also the list of contributors who participated in this project.
This library is licensed under the MIT License - see the LICENSE.md file for details.