Official package · Frameworks

React hooks for realtime WebSockets

Hooks for events, presence, client events and connection state, with one shared connection for the whole app. Works with Next.js and Remix, and streams LLM output to every open tab.

@hibira-io/reactnpm ↗GitHub ↗

useEvent, usePresence, useTrigger and useConnectionState, on React 17, 18 and 19.
Safe with server rendering and StrictMode: nothing connects on the server, and double mounts never leave a second socket.
streamToChannel() sends tokens from your backend in batches, and useStream() puts them back together in the browser.

Install
```
npm install @hibira-io/react pusher-js
```

Set it up

import { HibiraProvider } from '@hibira-io/react';

export function App() {
  return (
    <HibiraProvider
      appKey={import.meta.env.VITE_HIBIRA_KEY}
      options={{
        wsHost: 'ws.hibira.io',
        channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
      }}
    >
      <Dashboard />
    </HibiraProvider>
  );
}

Use it

import { useEvent, usePresence } from '@hibira-io/react';

function Orders() {
  const [orders, setOrders] = useState([]);
  useEvent('orders', 'order.created', (order) => setOrders((list) => [order, ...list]));
  const { count } = usePresence('presence-dashboard');
  return <OrderList orders={orders} watching={count} />;
}

Before you start

On the Free plan, list every origin your pages load from in the app’s allowed origins (http://localhost:3000 while developing, then your domain). "*" needs a paid plan.
Private and presence channels need an auth endpoint on your backend that signs subscriptions with the app secret, as with pusher-js.

Use the app key from your dashboard; the secret stays on your server. Channels, events and authorization endpoints work exactly as they do with Pusher. Create your free account →

React hooks for realtime WebSockets

Install

Set it up

Use it

Before you start