@bridgecord/react

React components and hooks for embedding Bridgecord chat into React applications.

Installation

npm install @bridgecord/react

Peer dependencies: react and react-dom (v18 or v19).

Components (Iframe)

The simplest way to add Bridgecord to your React app. Each component renders an iframe internally.

<BridgecordEmbed />

Full embed with channels, chat, and rewards.

import { BridgecordEmbed } from '@bridgecord/react';

function App() {
  return (
    <BridgecordEmbed
      embedId="your-embed-id"
      height={600}
      className="my-chat"
    />
  );
}

<BridgecordChat />

Single-channel chat view.

import { BridgecordChat } from '@bridgecord/react';

function App() {
  return (
    <BridgecordChat
      embedId="your-embed-id"
      channelId="optional-channel-id"
      sessionToken="optional-jwt"
      height={400}
    />
  );
}

<BridgecordChannels />

Channel list only. Useful for custom layouts.

import { BridgecordChannels } from '@bridgecord/react';

// Default rendering
<BridgecordChannels
  embedId="your-embed-id"
  onChannelSelect={(id) => console.log('Selected:', id)}
/>

// Custom rendering via render props
<BridgecordChannels embedId="your-embed-id">
  {({ channels, onSelect, selectedId }) => (
    <div className="my-sidebar">
      {channels.map(ch => (
        <button
          key={ch.id}
          onClick={() => onSelect(ch.id)}
          className={selectedId === ch.id ? 'active' : ''}
        >
          #{ch.name} {ch.locked && '🔒'}
        </button>
      ))}
    </div>
  )}
</BridgecordChannels>

Hooks (Headless)

For developers who want complete rendering control. No iframe — connects directly via Socket.io.

Note: Hooks that use Socket.io require socket.io-client as a dependency:

npm install socket.io-client

useBridgecord()

Full headless connection with channels, messages, and sending.

import { useBridgecord } from '@bridgecord/react';

function CustomChat() {
  const {
    connected,
    channels,
    currentChannel,
    messages,
    sendMessage,
    joinChannel,
    loading,
  } = useBridgecord({
    embedId: 'your-embed-id',
    sessionToken: 'user-jwt-token',
  });

  useEffect(() => {
    if (channels.length > 0) {
      joinChannel(channels[0].id);
    }
  }, [channels, joinChannel]);

  const handleSend = async () => {
    await sendMessage('Hello!');
  };

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <p>Connected: {connected ? 'Yes' : 'No'}</p>
      {messages.map(msg => (
        <p key={msg.id}>
          <strong>{msg.author.username}</strong>: {msg.content}
        </p>
      ))}
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

useBridgecordAuth()

Manage Discord OAuth authentication.

import { useBridgecordAuth } from '@bridgecord/react';

function AuthButton() {
  const { user, isAuthenticated, login, logout } =
    useBridgecordAuth({ embedId: 'your-embed-id' });

  if (isAuthenticated) {
    return (
      <div>
        <span>Welcome, {user?.displayName}</span>
        <button onClick={logout}>Logout</button>
      </div>
    );
  }

  return <button onClick={login}>Login with Discord</button>;
}

useBridgecordRewards()

Access rewards, levels, streaks, badges, and leaderboard.

import { useBridgecordRewards } from '@bridgecord/react';

function RewardsPanel() {
  const { points, level, streak, badges, leaderboard, loading } =
    useBridgecordRewards({
      embedId: 'your-embed-id',
      sessionToken: 'user-jwt-token',
    });

  if (loading) return <p>Loading rewards...</p>;

  return (
    <div>
      <h3>Level {level}</h3>
      <p>{points} points &middot; {streak} day streak</p>
      <h4>Badges ({badges.length})</h4>
      <ul>
        {badges.map(b => <li key={b.id}>{b.name}</li>)}
      </ul>
      <h4>Leaderboard</h4>
      <ol>
        {leaderboard.map(e => (
          <li key={e.userId}>
            {e.displayName} — Level {e.level} ({e.points} pts)
          </li>
        ))}
      </ol>
    </div>
  );
}

Props Reference

Component Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | embedId | string | Yes | Your embed ID from the dashboard | | sessionToken | string | No | Pre-auth JWT token | | height | number | No | Iframe height in px (default: 600) | | className | string | No | CSS class for the iframe | | channelId | string | No | Channel ID (BridgecordChat only) | | onChannelSelect | (id: string) => void | No | Channel selection callback | | embedUrl | string | No | Custom embed URL | | apiUrl | string | No | Custom API URL |

TypeScript

All types are exported:

import type {
  BridgecordMessage,
  BridgecordUser,
  BridgecordChannel,
  BridgecordRewardProfile,
  BridgecordLeaderboardEntry,
} from '@bridgecord/react';