gus3inov / use-share-state

React hook for share state between tabs/windows

React Shared State Hook 🔗

React hook for state synchronization between (windows, tabs).

This hook is based on a broadcast-channel library that works in New Browsers, Old Browsers, WebWorkers and NodeJs.

Installation

$ npm install use-share-state

Usage

import useShareState from "use-share-state";

const App = () => {
  const [state, setState] = useShareState(0);

  const increment = useCallback(() => {
    setState(state + 1);
  }, [state]);

  const decrement = useCallback(() => {
    setState(state - 1);
  }, [state]);

  return (
    <div className="App">
      Counter: {state}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

License

MIT © Muslim Guseinov

use-share-state's Issues

Using in multiple components creates multiple instances of BroadcastChannel

Given that BroadcastChannel instance is inherently a client of a single store shared among both windows, tabs, and, in the case of reactjs, multiple components within a single tab.

I Haven't done any analysis if multiple instances of BroadcastChannel in a single JS context are a good or bad thing. So, I'm not sure if evolving it to the React context pattern would make any difference other than increased complexity.

If you happen to have more insight, please share and I'm willing to take a stab at this idea.