React Centrifugo

This package builds a Centrifugo client from one configuration object and hands its native SDK surface to React. Subscription ownership, sharing, and cleanup come from simulcast and its Centrifugo adapter, so channel hooks are that runtime's own, re-exported here unchanged.

Get started · Hooks · Typed events · Devtools · GitHub

pnpm add react-centrifugo centrifuge react

Receive a publication

import { CentrifugeProvider, useChannel } from "react-centrifugo";

type Message = { text: string };

const Room = () => {
  useChannel<Message>("rooms:demo", (message) => {
    console.log(message.text);
  });

  return null;
};

export const Application = () => (
  <CentrifugeProvider
    configuration={{
      session: { id: "current-user" },
      transport: "ws://localhost:8000/connection/websocket",
    }}
  >
    <Room />
  </CentrifugeProvider>
);

Components listening to the same channel share one native subscription. The last one to leave releases it.

What this package adds

Centrifugo exposes more than publications. These hooks reach that surface with the SDK's own types, while the runtime keeps owning the subscription:

Hook	Gives you
useCentrifuge	the native Centrifuge client
useSubscriptionEvent	join, leave, subscribed, and the rest
useClientEvent	connection level SDK events

Use them for publish, history, presence, rpc, and recovery details that the runtime does not normalize.

What comes from the runtime

useChannel, useChannelDemand, useChannelStatus, useConnectionState, and createChannelEventHooks are re-exported from @priemskiyyy/simulcast-react without changes. Importing them from either package gives the same functions, so an application can mix both imports freely. Their reference lives in simulcast's documentation.

Code generation and devtools are shared tools too: @priemskiyyy/simulcast-codegen and @priemskiyyy/simulcast-devtools.