React State Sync - a custom hook for synchronizing state

Create synchronized state instances, then use them throughout your app. Opt into localStorage or sessionStorage persistence to sync the state across multiple tabs.

✨ Basic usage

1import { createSyncState } from 'react-state-sync';
2
3// create a synchronized state instance
4const counter = createSyncState({ defaultValue: 0 });
5
6// extract the getter custom hook and an updater function
7const { useSyncValue, setSyncValue } = counter;
8
9function CounterDisplay() {
10  // get the count value
11  const count = useSyncValue();
12  
13  return <div>Count is: {count}</div>;
14}
15
16function DoubleDisplay() {
17  // get the count value and transform it
18  const doubleCount = useSyncValue(n => n * 2);
19
20  return <div>Double is: {doubleCount}</div>;
21}
22
23function Counter() {
24  return <button onClick={() => setSyncValue(n => n + 1)}>increment</button>;
25}
26
27function Reset() {
28  return <button onClick={() => setSyncValue(0)}>reset</button>;
29}
30
31function App() {
32  return (
33    <>
34      <CounterDisplay />
35      <DoubleDisplay />
36      <Counter />
37      <Reset />
38    </>
39  );
40}

With localStorage

Persisting the state to a storage layer will sync your state across multiple opened tabs.

First, initialize the state instance with the storage option set to window.localStorage and give it a unique key name:

1// in ./sharedState
2export const counter = createSyncState({
3  defaultValue: 0,
4  storage: window.localStorage,
5  key: 'counter',
6});

Then just use the state as normal in one tab and watch your app get updated in the other tabs:

1import { counter } from './sharedState';
2
3const { useSyncValue, setSyncValue } = counter;
4
5// part of the app rendering in a browser tab
6function Counter() {
7  const count = useSyncValue();
8  return <button onClick={() => setSyncValue(n => n + 1)}>increment {count}</button>;
9}

1import { counter } from './sharedState';
2
3const { useSyncValue } = counter;
4
5// part of the app rendering in a different tab
6function CounterDisplay() {
7  const count = useSyncValue();
8  
9  return <div>Count is: {count}</div>;
10}