0.1.3 • Published 1 month ago
@blocdigital/uselocalstorage v0.1.3
uselocalstorage
Handle interaction with local and session storage
Install
npm install --save @blocdigital/uselocalstorage
Usage
import {useState, useEffect} from 'react';
import useLocalStorage from '@blocdigital/uselocalstorage';
const Example = () => {
const [state, setState] = useState('hello world');
// initiate the session storage
const storage = useLocalStorage('session');
// initialise the storage state
useEffect(() => {
storage.init('state', 'hello world');
}, [storage]);
// set up listeners to keep state in sync with storage
useEffect(() => {
const onStateChange = (key) => {
if(key !== 'state') return;
setState(storage.get(key));
}
storage.on('set', onStateChange);
// remember to tidy up you event listeners
return () => storage.off('set', onStateChange);
}, [storage]);
return (
<div>
<span>Current state: {state}</span>
<br />
<button onClick={()=>{
storage.set('state', String(Date.now()));
}}>
Change State
</button>
</div>
);
};