react-tab-sync

Sync React state across browser tabs instantly.

Demo

Install

npm install react-tab-sync

Usage

import { useTabSync } from "react-tab-sync";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useTabSync("auth", true);

  return (
    <div>
      <h1>{isLoggedIn ? "Logged In" : "Logged Out"}</h1>

      <button onClick={() => setIsLoggedIn(false)}>Logout</button>
    </div>
  );
}

Why?

When users open multiple tabs, state often gets out of sync (auth, theme, etc).

This hook keeps them in sync automatically using the browser storage event.

License

ISC