useLocalStorage
Get and Set a specific value in the local storage.
Parameters
- the local storage key.
- the initial value of the key (default is
null
).
Return Values
It returns a tuple of 2 values:
Index | Name | Type | Description |
---|---|---|---|
0 | value | Any | the current local storage value. |
1 | setValue | Function | update the value. |
INFO
When you update a value on the local storage, a StorageEvent will be fired on window
.
Example Usage
tsx
import { useLocalStorage } from 'react-pre-hooks';
export default function Example() {
const [name, setName] = useLocalStorage('name', 'unknown');
return (
<main>
<label htmlFor="name">Name:</label>
<input id="name" value={name} onChange={e => setName(e.target.value)} />
<p>Current user name: {name}</p>
</main>
);
}
import { useLocalStorage } from 'react-pre-hooks';
export default function Example() {
const [name, setName] = useLocalStorage('name', 'unknown');
return (
<main>
<label htmlFor="name">Name:</label>
<input id="name" value={name} onChange={e => setName(e.target.value)} />
<p>Current user name: {name}</p>
</main>
);
}