useLocalStorage()
The useLocalStorage()
hook is a quick way to set, read, and manage localStorage
values. It comes with automatic JSON serialization/deserialization.
Import
import { useLocalStorage } from 'react-haiku';
Usage
Storage Value:
import { useEffect } from 'react'
import { useLocalStorage } from "react-haiku"
export const Component = () => {
const [value, setValue] = useLocalStorage('message');
useEffect(() => {
setValue({ message: 'Hello!' })
}, [])
return (
<>
<b>Storage Value: {value.message}</b>
<button onClick={() => setValue({ message: 'Woah!' })}>Update Storage</button>
</>
);
}
API
This hook accetps the following arguments:
key
- the key to use for a localStorage entryvalue
- the value corresponding to a certain key, can be a a simple string value or an object