react-use-localstorage
depends on stable v16.8.1~
Access Local Storage using React hooks.
How to use it
;;; ; { const item setItem = ; return <div className="App"> <h1>Set Name to store in Local Storage</h1> <div> <label> Name:' ' <input type="text" placeholder="Enter your name" value=item onChange= /> </label> </div> </div> ;} const rootElement = document;ReactDOM;
Note for SSR (server-side rendering)
If you are using Gatsby or other SSR frameworks, such as Next.js, refer to this workaround by @hencatsmith.
You need to make sure that window
is available.
const useSsrLocalStorage = key: string initial: string: string ReactDispatch<string> return typeof window === 'undefined' ? initial undefined : ;;
Demo
Changelog
Expand Changelog
3.4.0
This version "Watch changes on storage and change state".
Reference: https://github.com/dance2die/react-use-localstorage/pull/30
Thank you @VitorLuizC for the PR and @Svish for the review.
3.3.0
Reverted the implementation of setValue
to set localStorage
value directly, instead of depending on useEffect
.
Reference: window.localstorage updated after value managed by useLocalStorage #29
3.2.1
The library is covered by test. Thank you so much, @SeanMcP~
3.0.0
Decided to go with @TheAifam5 the following breaking change as the type is derived from React type definition.
-
Breadking change:
setIteme
type is changed from(item: string) => void
() toReact.Dispatch<string>
-
Updated infrastructure by @TheAifam5 🙏 in PR #13
-
Dropped babel in favor of
tsc
+uglifyjs
-
Replaced npm with yarn
-
Added husky for pre-commit git hooks
-
Source map has been dropped from distribution
-
distribution is moved from
dist
tolib
folder2.4.1
-
-
Added
useLocalStorage
return type explicitly to generate correctindex.d.ts
typing file.2.4.0
-
Added TypeScript typings as suggested by @TheAifam5 in Issue #9
2.3.0
-
Fixed a bug where initial value is returned all the time #7 by @lilasquared 🙏
2.2.0
-
Sets initial value in local storage
2.1.0
-
Can optionally pass an initial value
-
This is to prevent form field from being uncontrolled.
2.0.0
-
Breaking change -
setItem
doesn't requirekey
1.1.1
-
Updated to React v16.8.1, which contains the patched Hooks
1.1.0
-
Updated dev dependency version
1.0.0
-
Updated to React v16.8.0, which contains the stable Hooks
0.0.6
-
Changed the language from JavaScript to TypeScript
-
It has minimized the distribution file greatly
Contributors
Thanks goes to these wonderful people (emoji key):
Aaron Roberts 🤔 🐛 💻 |
Sung Kim 💻 🐛 📖 |
TheAifam5 🤔 💻 🚇 |
Vitor Luiz Cavalcanti 💻 |
Sean McPherson ⚠️ 💻 |
Torleif Berger 👀 |
This project follows the all-contributors specification. Contributions of any kind welcome!