@spontom/relaykit-react

RelayKit React SDK — hooks and components for real-time video

Installation

npm install @spontom/relaykit-react

Quick Start

import { RelayKitProvider, useRelayKit, useParticipants } from '@spontom/relaykit-react'

function App() {
  return (
    <RelayKitProvider apiUrl="https://api.relaykit.live" apiKey="rk_live_xxxx">
      <VideoRoom />
    </RelayKitProvider>
  )
}

function VideoRoom() {
  const { connect, disconnect, status } = useRelayKit()
  const participants = useParticipants()

  return (
    <div>
      <button onClick={() => connect({
        roomId: 'my-room',
        participantIdentity: 'user_123',
      })}>
        {status === 'connected' ? 'Leave' : 'Join'}
      </button>
      {participants.map(p => <div key={p.identity}>{p.name}</div>)}
    </div>
  )
}

Hooks

| Hook | Description | |------|-------------| | useRelayKit() | Room connection, status, connect/disconnect | | useParticipants() | List of remote participants | | useLocalCamera() | Camera toggle and status | | useLocalMic() | Microphone toggle and status | | useParticipantTracks(identity) | Audio/video tracks for a participant |

Components

| Component | Description | |-----------|-------------| | <RelayKitProvider> | Context provider for API connection | | <VideoTile> | Individual participant video | | <AudioTile> | Individual participant audio | | <ParticipantGrid> | Auto-layout grid of all participants | | <ControlBar> | Camera, mic, and leave controls |

Documentation

• React SDK Docs
• Quickstart Guide
• API Reference

License

MIT - Spontom Technologies