inblack67 / use-sync-set-state

Saves the state in localStorage thus, gives that realtime feel

Home Page:https://www.npmjs.com/package/use-sync-set-state

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

use-sync-set-state

  • This React Hook lets you store the state in localStorage and sync it in between tabs, automagically.

  • use-sync-set-state is a superset of useState i.e, you can always set the state explicitly or via callback function, your call.

  • What's different is that it stores the state in the localStorage and syncs it between tabs by listening to localStorage's storage event.

Installation

yarn add use-sync-set-state

or

npm i use-sync-set-state

Usage

import useSyncSetState from 'use-sync-set-state';

const App = () => {

  React.useEffect(() => {
    setTheme('light');
  }, [])

  const [theme, setTheme] = useSyncSetState('theme', 'dark');

  return <React.Fragment>

  <p data-testid='theme'>{ theme }
  </p>

  // changes will be reflected in all the tabs, without reload.
  <button onClick={e => setTheme((current) => current === 'dark' ? 'light' : 'dark')}>toggle</button>

  <p data-testid='localstorage'>
    {localStorage.getItem('theme')}
  </p>
  
  </React.Fragment>
}

Repository

Explore

About The Author

Website

Github

About

Saves the state in localStorage thus, gives that realtime feel

https://www.npmjs.com/package/use-sync-set-state

License:MIT License


Languages

Language:TypeScript 86.9%Language:HTML 13.1%