React hooks and providers for [FluxyChat](https://github.com/AlessandroFare/fluxychat).

@fluxy-chat/react

React hooks and providers for FluxyChat.

Install

pnpm add @fluxy-chat/react @fluxy-chat/sdk

FluxyRealtimeProvider uses workerUrl plus publishableKey (pk_ for public rooms), authTokenProvider (JWT string or async mint), or hosted connectUrl. It does not take token or config.baseUrl. Pass userId when the JWT has no sub. FluxyYjsProvider takes token.

When the provider owns the session, omit client on useChat. A standalone FluxyChatClient is still valid if you pass it into hooks.

30 seconds (public room)

import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";

<FluxyRealtimeProvider workerUrl={workerUrl} publishableKey="pk_...">
  <Room />
</FluxyRealtimeProvider>

function Room() {
  const { messages, sendMessage } = useChat({ roomId: "general" });
}

Usage (member JWT)

import { FluxyChatClient } from "@fluxy-chat/sdk";
import { FluxyRealtimeProvider, useChat, useInbox } from "@fluxy-chat/react";

const client = new FluxyChatClient({
  baseUrl: process.env.NEXT_PUBLIC_FLUXYCHAT_WORKER_URL!,
  userId: "alice",
  token: memberJwt,
});

function App() {
  return (
    <FluxyRealtimeProvider workerUrl={process.env.NEXT_PUBLIC_FLUXYCHAT_WORKER_URL!} connectUrl="/api/fluxy/connect">
      <Room roomId="general" />
      <InboxPanel />
    </FluxyRealtimeProvider>
  );
}

function Room({ roomId }: { roomId: string }) {
  const { messages, sendMessage, connectionState } = useChat({ roomId, client });
  // connectionState: connected | degraded | degraded-http | blocked | …
}

function InboxPanel() {
  const { items, unseen, onItem } = useInbox({ client, onItem: (item) => console.log(item) });
}

Inbox demo

useInbox delivers live items, unseen counts, and onItem callbacks for badge UX:

Inbox preview — tabs, unseen badge, mark-read flow

Try it in the hosted console: open Inbox after onboarding, or run the inbox parity E2E smoke locally.

const { items, unseen, markRead } = useInbox({
  client,
  onItem: (item) => showToast(item.preview),
});

Exports

Hook / component	Purpose
`useChat`	Room messages, send, pagination, connection state
`useThread`	Direct replies to one `parentId`. Shares the `useChat` store under the provider.
`useInbox`	Inbox items feed, unseen count, live `onItem`
`useNotifications`	In-app notification list
`useLocation`	Consume `fleet.gps_update` tracks in a room. Not a Maps SDK. Ingest is HTTP `POST /fleet/gps`.
`useWebPush`	Web push subscription helpers
`useUserChannel`	User-scoped WebSocket events
`FluxyRealtimeProvider`	Shared client. `publishableKey`, `authTokenProvider`, or `connectUrl`
`useFluxyChat` / `useFluxyChatOptional`	Access provider client

Note on the transitional split

During the transitional split, this package re-exports React APIs implemented in @fluxy-chat/sdk. New apps should import hooks from here; the monolithic SDK export remains for backward compatibility.

Legacy imports via @fluxy-chat/sdk/react continue to work during the split.

@fluxy-chat/sdk — FluxyChatClient, REST, types
@fluxy-chat/ui — prebuilt chat UI components
@fluxy-chat/config — worker fluxy.config.ts

License

MIT

@fluxy-chat/react

On this page