use-local-storage-value allows you to use value from localStorage as react state. Hook works exactly the same as useState, but also writes value to local storage:
Mantine docs website uses this hook to store color scheme information:
use-local-storage-value 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).
You can specify value type same as in useState hook, type must extend string: