use-broadcast-channel (React-hooks)

The Broadcast Channel API allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) and workers on the same origin. -MDN

This package provides a thin wrapper around the browser's native Broadcast Channel API in the form of a React hook function. The hook(s) can be used in any React component or custom hook to harness the functionality of Broadcast Channel API.

To use the hooks in browsers that do not support Broadcast Channel API, install and import broadcastchannel-polyfill.

For typescript users: The default data-type for all messages are set to string but can be easily overridden by explicitly passing type parameter to the hook(s). Example for numeric data: useBroadcastChannel<number>("count", (e) => console.log(e.data));

Setup

Package available at NPM.

• NPM

  npm install use-broadcast-channel

• Yarn

  yarn add use-broadcast-channel

API

The package exports multiple hooks for different use-cases.

useBroadcastChannel hook

React hook to create and manage a Broadcast Channel across multiple browser windows/tabs/frames. This is base hook exported by the package as all other exported hooks depends on it.

- Read-only

Only subscribe for events broadcasted on a particular channel.

import { useBroadcastChannel } from "use-broadcast-channel";

function App() {
  useBroadcastChannel("userId", (e) => alert(e.data));
  return null;
}

- Write-only

Only broadcast (post) event on a particular channel.

import { useBroadcastChannel } from "use-broadcast-channel";

function App() {
  const postUserId = useBroadcastChannel("userId");
  return <button onClick={() => postUserId("ABC123")}>Post UserId</button>;
}

- Read and Write

Both broadcast (post) event and subscribe for events broadcasted on a particular channel.

import { useBroadcastChannel } from "use-broadcast-channel";

function App() {
  const postUserId = useBroadcastChannel("userId", (e) => alert(e.data));
  return <button onClick={() => postUserId("ABC123")}>Send UserId</button>;
}

useBroadcastState hook

React hook to manage state across browser windows/tabs/frames. It has a similar signature as React.useState. It used useBroadcastChannel under the hood.

import { useBroadcastState } from "use-broadcast-channel";

function App() {
  const [count, setCount] = useBroadcastState("count", 0);
  return (
    <div>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
      <span>{count}</span>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
}