loading...
Cover image for react-use-localstorage

react-use-localstorage

dance2die profile image Sung M. Kim Originally published at slightedgecoder.com on ・2 min read

Photo by Chris Scott on Unsplash

React Hooks was just announced today at React Conf 2018.

You can check the official documentation & also following article,

so I won’t go into it further.

I created a simple hook called react-use-localstorage, which lets you store state in Local Storage.

🚀 Prerequisite

You need to use following React versions.

  • react : 16.7.0-alpha.0
  • react-dom : 16.7.0-alpha.0

It’s bleeding edge and not recommended to use in production.

You can follow along on CodeSandbox.

⚒ How to use it

First, install the package, react-use-localstorage.

And use it in a “Functional Component”.

🏃 Working Demo

The demo shows that state is saved directly in local storage.

💫 Additional Context

The source code is available on GitHub with MIT license.

The post react-use-localstorage appeared first on Sung's Technical Blog.

Discussion

pic
Editor guide
Collapse
andreasklinger profile image
Andreas Klinger ✌️️

why do you also save into state? for re-renders?

Collapse
dance2die profile image
Sung M. Kim Author

That's a great observation, Andreas.

It's to turn <input /> into a controlled component, which makes input's state to be controlled by React (one source of truth for state)

Collapse
csulit profile image