A react hook to conviently work with a value stored in the local storage.
Any JSON serializable data type is supported.
The defaultValue
is used when no item with the key
is found in local storage.
import { useLocalStorage } from 'react-panoply';
const MyComponent = (props) => {
cont [showToolbar, setShowToolbar] = useLocalStorage('showToolbar', true);
return (
<div>
{ showToolbar && <Toolbar /> }
{
// ...
}
</div>
);
}
clearIfDefault [boolean | default: true]
While this flag is active the local storage item is only set to values that are different from the defaultValue, when updated to the defaultValue the item is removed from local storage.
Example:
cont [showToolbar, setShowToolbar] = useLocalStorage('showToolbar', true, { clearIfDefault: true });
- stable updater: the updater callback function identity is guaranteed to be stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.
- functional updates: If the new value is computed using the previous value, you can pass a function to the updater. The function will receive the previous value, and return an updated value.
- debug infos: the hook provides debug information for React DevTools
- the 0.0.5-alpha implementation does not yet use deepEqual to evaluate whether the value is equal to the defaultValue when
clearIfDefault
is used. So when storing an object in local storage the serialized value is never cleared.