react-use-localstorage
v3.5.3TypeScript
Use Local Storage with React hooks
0/weekUpdated 3 years agoMITUnpacked: 21.8 KB
Published by Sung Kim
npm install react-use-localstoragereact-use-localstorage
_depends on stable v16.8.1~_
Access Local Storage using React hooks.
Fork it on CodeSandbox
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
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(
`
$3
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.
`js`
const useSsrLocalStorage = (
key: string,
initial: string
): [string, React.Dispatch
return typeof window === 'undefined'
? [initial, (value: string) => undefined]
: useLocalStorage(key, initial);
};
Demo
!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
- 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 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):
 Aaron Roberts 🤔 🐛 💻 |  Sung Kim 💻 🐛 📖 |  TheAifam5 🤔 💻 🚇 |  Vitor Luiz Cavalcanti 💻 |  Sean McPherson ⚠️ 💻 |  Torleif Berger 👀 |
This project follows the all-contributors specification. Contributions of any kind welcome!