Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProSend and receive messages between tabs, windows and iframes of the same origin, with the latest message in state and a cleanup on unmount.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it to tell other tabs that something happened: the user signed out, a cart changed, a draft was saved. It is also good for a presenter view that follows a main window.
Do not use it to persist data (use storage) or to talk to a server. Messages reach only open tabs of the same origin.
import { useBroadcastChannel } from "@/hooks/use-broadcast-channel"const { message, post, supported } = useBroadcastChannel<{
type: "signed-out"
}>("auth")
React.useEffect(() => {
if (message?.type === "signed-out") redirectToLogin()
}, [message])useBroadcastChannel<T>(name: string, onMessage?: (data: T) => void): { message: T | undefined; post: (data: T) => void; supported: boolean }
| Name | Type | Description |
|---|---|---|
name | string | Channel name. Tabs on the same origin with the same name talk. |
onMessage | (data: T) => void | Optional listener, always the newest version. |
message | T | undefined | The last message received (not your own). |
post | function | Send data to every other tab. A no-op when unsupported. |
supported | boolean | false on the server and in browsers without BroadcastChannel. |
The channel is closed on unmount and re-opened when name changes.
A hook has no markup. When a message changes what the person sees (for example they were signed out in another tab), tell them with a visible message in a polite live region.
The hook ships with renderHook tests (use-broadcast-channel.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.