use-local-storage allows you to use value from
localStorage as react state.
Hook works exactly the same as
useState, but also writes the value to local storage:
Mantine docs website uses this hook to store color scheme information:
use-local-storage subscribes to storage event.
When state changes in one tab it automatically updates value in all other opened browser tabs.
You can test this feature by opening 2 tabs with Mantine docs side by side and changing color scheme
(button on the top right or
⌘ + J on mac and
Ctrl + J on Windows and Linux).
By default, hook will serialize/deserialize data with
If you need to store data in local storage that cannot be serialized with
– provide your own serialization handlers:
superjson is compatible with
JSON.parse but works for
You can specify value type same as in