React hook for sharing Server-Sent Events across tabs using BroadcastChannel and Web Locks.
npm install use-shared-sse!minzipped size
!Types

!License
> 🔄 React hook to share a single Server-Sent Events (SSE) connection across multiple browser tabs using BroadcastChannel and Web Locks.
> ✅ Helps avoid browser HTTP/1.1 connection limits by ensuring only one active SSE connection across all tabs.
``bash`
npm install use-shared-sse
`tsx
import { useSse } from 'use-shared-sse';
function SseExample() {
useSse({
url: 'http://localhost:3005/sse',
options: { withCredentials: true },
events: [
{ name: 'ping', cb: onPingEvent },
{ name: 'hero', cb: onHeroReceiveEvent },
],
});
function onPingEvent(data: MessageEvent['data']) {
console.log('Ping:', data);
}
function onHeroReceiveEvent(data: MessageEvent['data']) {
console.log('Hero:', data);
}
return <>>;
}
`
React hook that manages a shared SSE connection across browser tabs using BroadcastChannel and Web Locks.
---
| Field | Type | Required | Description |
|---------------|------------------------------------------------|----------|-------------|
| url | string \| URL | ✅ Yes | The URL to open the SSE connection to. |options
| | EventSourceInit | No | SSE configuration object. Default is { withCredentials: true }. See MDN docs. |events
| | { name: string; cb: (event: MessageEvent) => void }[] | ✅ Yes | A list of event listeners, each with an event name and handler. |channelName
| | string | No | Custom name for the BroadcastChannel. Default: "sse-channel". |lockName
| | string | No | Custom name for the Web Lock. Default: "sse-lock"`. |