@brenox/react

React hooks for @brenox/sdk.

• Documentation: www.breno-x.com/docs
• Requires: React 18+ · @brenox/sdk >= 0.1.0

Install

# npm
npm install @brenox/react @brenox/sdk react

# pnpm
pnpm add @brenox/react @brenox/sdk react

# yarn
yarn add @brenox/react @brenox/sdk react

Quick start

import { BrenoxClient, localStorageTokenStore } from "@brenox/sdk";
import { BrenoxProvider, useMessages } from "@brenox/react";

const client = new BrenoxClient({
  baseUrl: process.env.NEXT_PUBLIC_BRENOX_API_URL ?? "https://api.breno-x.com",
  tokenStore: localStorageTokenStore(),
});

function App() {
  return (
    <BrenoxProvider client={client}>
      <Chat workspaceId={1} channelId={1} />
    </BrenoxProvider>
  );
}

function Chat({ workspaceId, channelId }: { workspaceId: number; channelId: number }) {
  const { messages, sendMessage, connectionState } = useMessages(workspaceId, channelId, {
    channel: { origin: window.location.origin },
  });

  return (
    <div>
      <p>{connectionState}</p>
      <ul>{messages.map((m) => <li key={m.id}>{m.content}</li>)}</ul>
      <button onClick={() => void sendMessage("Hello!")}>Send</button>
    </div>
  );
}

Hooks

| Hook | Purpose | |------|---------| | useMessages | Message history, live updates, send | | useChannel | Low-level WebSocket events | | useNotifications | Poll and mark notifications read | | useCallSignaling | Voice/video call signaling |

Full API reference: React SDK docs

Links

• Documentation
• @brenox/sdk
• GitHub
• Issues