use-storage-listener

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:

name	Params
useLocalStorage	callback: void dependencies: string[]
useStorageListener	key: string

Options:

Option	Params	Description
setStorage	key: string arg: any	when it receives a key and a value, it will add these to the store, or update the value if the key already exists (triggers useStorageListener)
removeStorage	key: string	deletes the key whose name it receives as a parameter from storage (triggers useStorageListener)
getStorage	key: string	when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object
clearStorage	callEventKey?: string	deletes the key whose name it receives as a parameter from storage (Activates useStorageListener if callEventKey is provided**)**