useLocalStorage - React custom hook

React custom Hook to manage localStorage API.

Why useLocalStorage?

With this hook, you can handle your localStorage:

• Manage and use it as a simple React State.
• Don't need to call the Window interface.

TL;DR;

const [storageVariable, setStorageVariable] = useLocalStorage('storage data');

Usage

Just install:

npm install react-hook-uselocalstorage

And import the hook:

import useLocalStorage from 'react-hook-uselocalstorage';

Use it in your component:

import React, { useRef } from 'react'
import useLocalStorage from 'react-hook-uselocalstorage'

const App = () => {
  const [storageVariable, setStorageVariable] = useLocalStorage('storage data');
  const inputRef = useRef(null);

  const clickHandler = () => {
    setStorageVariable(inputRef.current.value);
  }

  return (
    <div>
      <h2>{storageVariable}</h2>

      <input ref={inputRef} type='text' />
      <button onClick={clickHandler}>Set</button>
    </div>
  )
}

export default App

LIVE Example

(Check it in deployed example)

License

MIT © franlol