@spontom/relaykit-react

@spontom/relaykit-react

React SDK for RelayKit — ship real-time video in minutes.

Install

npm install @spontom/relaykit-react @livekit/components-react @livekit/components-styles

Quick start — drop-in <MeetingRoom> (new in 0.3)

import { RelayKitProvider, MeetingRoom } from '@spontom/relaykit-react'
import '@livekit/components-styles'

function App() {
  return (
    <RelayKitProvider
      apiUrl="https://api.relaykit.live"
      apiKey="rk_live_xxxxxxxxxxxx"
    >
      <MeetingRoom
        roomId="your-room-uuid"
        participantIdentity="teacher_42"
        participantName="Pavan Reddy"
        metadata={{ avatarUrl: 'https://your-cdn.com/avatars/pavan.jpg' }}
        onLeave={() => navigate('/')}
      />
    </RelayKitProvider>
  )
}

That's it. You get:

• Pre-join screen (camera preview + mic/cam toggles + name input)
• Live video grid with auto-arranging tiles
• Custom participant tiles with initials avatars when camera is off
• Pin-to-focus layout (click any tile to spotlight)
• Auto-focus on screen share
• Speaking indicator (purple glow ring)
• Connection quality indicators
• Pre-built control bar (mic, cam, screen share, chat, leave)

Backend: create the room

Your backend creates the room and gets a UUID:

POST https://api.relaykit.live/api/v1/rooms
Authorization: Bearer rk_live_xxxxxxxxxxxx

{ "displayName": "Class with Saanvi" }

→ { "data": { "id": "uuid-here", ... } }

Pass that id as roomId to <MeetingRoom>. The SDK fetches the token automatically.

Customization

<MeetingRoom
  roomId={roomId}
  participantIdentity={userId}
  participantName={displayName}
  showPreJoin={true}              // default true
  enableChat={true}                // default true
  enableScreenShare={true}         // default true
  accentColor="#534AB7"            // brand color
  onLeave={handleLeave}
/>

Participant avatars

Pass metadata to <MeetingRoom> — it'll flow to LiveKit and be available to other participants in the room:

<MeetingRoom
  roomId={roomId}
  participantIdentity="teacher_42"
  participantName="Pavan Reddy"
  metadata={{
    avatarUrl: 'https://your-cdn.com/avatars/pavan.jpg',
    role: 'teacher',
  }}
/>

If avatarUrl is provided, the tile shows the image when camera is off. Otherwise, falls back to a gradient circle with the user's initials.

Lower-level primitives

If you want full control, use the individual components and hooks:

import {
  PreJoin,
  RelayKitTile,
  Avatar,
  useRelayKit,
  useParticipants,
  useLocalCamera,
  useLocalMic,
} from '@spontom/relaykit-react'

License

MIT — Spontom Technologies