https://github.com/dance2die/react-use-localstorage
(seeking maintainers) ⚓ React hook for using local storage
https://github.com/dance2die/react-use-localstorage
localstorage npm npm-package react react-hook react-hooks typescript
Last synced: about 1 month ago
JSON representation
(seeking maintainers) ⚓ React hook for using local storage
- Host: GitHub
- URL: https://github.com/dance2die/react-use-localstorage
- Owner: dance2die
- License: mit
- Created: 2018-10-25T22:57:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:54:25.000Z (about 2 years ago)
- Last Synced: 2025-03-29T04:04:41.731Z (about 1 month ago)
- Topics: localstorage, npm, npm-package, react, react-hook, react-hooks, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-use-localstorage
- Size: 1.08 MB
- Stars: 171
- Watchers: 3
- Forks: 32
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-use-localstorage
[](#contributors)
_depends on stable v16.8.1~_
Access [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) using [React hooks](https://reactjs.org/docs/hooks-intro.html).
Fork it on CodeSandbox
[](https://codesandbox.io/s/09xj95vxl)
## How to use it
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import useLocalStorage from 'react-use-localstorage';
import './styles.css';
function App() {
const [item, setItem] = useLocalStorage('name', 'Initial Value');
return (
Set Name to store in Local Storage
Name:{' '}
setItem(e.target.value)}
/>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);
```
### Note for SSR (server-side rendering)
If you are using Gatsby or other SSR frameworks, such as Next.js, refer to [this workaround](https://github.com/dance2die/react-use-localstorage/issues/24#issuecomment-581479939) by @hencatsmith.
You need to make sure that `window` is available.
```js
const useSsrLocalStorage = (
key: string,
initial: string
): [string, React.Dispatch] => {
return typeof window === 'undefined'
? [initial, (value: string) => undefined]
: useLocalStorage(key, initial);
};
```
## 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` () to `React.Dispatch`
- Updated infrastructure by @TheAifam5 🙏 in [PR #13](https://github.com/dance2die/react-use-localstorage/pull/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` to `lib` folder
2.4.1
- Added `useLocalStorage` return type explicitly to generate correct `index.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 require `key`
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](https://github.com/all-contributors/all-contributors#emoji-key)):
Aaron Roberts
🤔 🐛 💻
Sung Kim
💻 🐛 📖
TheAifam5
🤔 💻 🚇
Vitor Luiz Cavalcanti
💻
Sean McPherson
⚠️ 💻
Torleif Berger
👀
Evgeny Markov
🐛 🤔
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!