use-storage-listener v1.1.1

useStorageListener 👨🏾‍🎤👩🏾‍🎤🧑🏾‍🎤

Installation

Sometimes we need to be able to detect changes in our localSotrage independently from the .* file we have made the modification, useStorageListener provides a dynamic way to listen for keys that are modified in the local storage in a simple and fast way, either using the listener effect or the state handler.

note: The listener effect can listen to other events that are not related to the localStorage, simply specify the name of the event to listen to 🧐

(i) new auto type transformation 1.1.1 🧩

Using npm or yarn:

$ npm i use-storage-listener
$ yarn add use-storage-listener

Simple use - useStorageListener:

import useStorageListener, { setStorage } from 'use-storage-listener';

function Test() {
 const [value, setValue] = useState(null)
 
  useStorageListener(({ key, value}) => {
    setValue(value)
  }, ['rememberMe'])

  const set = (remember) => {
    setStorage('rememberMe', remember);
  }
  return (
    <div className="App">
      <header className="App-header">
        <h1>{value}</h1>
        <button onClick={() => set('nice work!')}>ONCLICK</button>
      </header>
    </div>
  );
}

Simple use - useLocalStorage:

import { useLocalStorage } from 'use-storage-listener';

function Test() {
 const {state, setState} = useLocalStorage('rememberMe');
 
  return (
    <div className="App">
      <header className="App-header">
        <h1>{state}</h1>
        <button onClick={() => setState('simple work!')}>ONCLICK</button>
      </header>
    </div>
  );
}

Hooks:

Options: