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));
Package available at NPM.
-
NPM
npm install use-broadcast-channel
-
Yarn
yarn add use-broadcast-channel
The package exports multiple hooks for different use-cases.
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.
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;
}
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>;
}
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>;
}
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>
);
}