@fluxy-chat/react

React hooks and providers for FluxyChat.

Install

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

Requires react 18+ as a peer dependency.

Usage

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

function App() {
  return (
    <FluxyRealtimeProvider
      workerUrl={process.env.NEXT_PUBLIC_FLUXYCHAT_WORKER_URL!}
      publishableKey={process.env.NEXT_PUBLIC_FLUXYCHAT_PUBLISHABLE_KEY!}
    >
      <Room />
    </FluxyRealtimeProvider>
  );
}

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

Private rooms: pass authTokenProvider (member JWT) or connectUrl instead of publishableKey.

Requires react 18+ as a peer dependency. Pin @fluxy-chat/sdk@^0.6.17.

Inbox demo

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

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 for one threadParentId (shared room store under the provider) | | useInbox | Inbox items feed, unseen count, live onItem | | useNotifications | In-app notification list | | useLocation | Consume fleet.gps_update tracks. Not a Maps SDK. | | useWebPush | Web push subscription helpers | | useUserChannel | User-scoped WebSocket events | | FluxyRealtimeProvider | Shared client + JWT refresh | | 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.

Related packages

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

License

MIT