A lightweight library for synchronizing React context state across browser tabs or windows using the Broadcast Channel API.

---

✨ Features

• State Synchronization: Share and sync state across multiple tabs/windows.
• React Integration: Easily integrate with React context and hooks.
• Minimal Dependencies: Built with zero external dependencies apart from React.
• TypeScript Support: Fully typed for better developer experience.

---

📦 Installation

Install the package via NPM:

1npm install react-context-sync

or via Yarn:

1yarn add react-context-sync

---

🚀 Usage Example

Here's how to synchronize context state across tabs with react-context-sync:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { SyncProvider, useSyncContext } from 'react-context-sync';
4
5// Step 1: Define the initial state and reducer
6const initialState = { count: 0 };
7const reducer = (state, action) => {
8  switch (action.type) {
9    case 'INCREMENT':
10      return { count: state.count + 1 };
11    case 'DECREMENT':
12      return { count: state.count - 1 };
13    default:
14      return state;
15  }
16};
17
18// Step 2: Create the main App component with SyncProvider
19const App = () => (
20  <SyncProvider
21    initialState={initialState}
22    reducer={reducer}
23    channelName="my-app-sync"
24  >
25    <Counter />
26  </SyncProvider>
27);
28
29// Step 3: Create a Counter component that uses the shared context
30const Counter = () => {
31  const { state, dispatch } = useSyncContext();
32
33  return (
34    <div>
35      <h1>Count: {state.count}</h1>
36      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
37      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
38    </div>
39  );
40};
41
42ReactDOM.render(<App />, document.getElementById('root'));

---

⚙️ API

SyncProvider

The SyncProvider component wraps your application and synchronizes state across tabs.

Props:

Name	Type	Required	Description
initialState	any	✅	The initial state of the context.
reducer	(state, action) => state	✅	A reducer function to handle actions.
channelName	string	✅	A unique name for the BroadcastChannel.

---

useSyncContext

A hook to access the synchronized context.

Returns:

Name	Type	Description
state	any	The current state of the context.
dispatch	(action) => void	Function to dispatch an action to the reducer.

---

🐜 License

This project is licensed under the MIT License.