React hooks and tiny UI primitives for building peer-to-peer calls on top of the `@conference-kit/core` peer and a signaling server.
npm install @conference-kit/reactReact hooks and tiny UI primitives for building peer-to-peer calls on top of the @conference-kit/core peer and a signaling server.
``bash`
npm install @conference-kit/react
Peer deps: React 18+.
- useMeshRoom — mesh everyone in a room; exposes roster, participants, local stream, raised hands, waiting-room/host state, and helpers like requestStream, admitPeer, rejectPeer, raiseHand, leave.useCall
- / useCallState — 1:1 call helper with local/remote streams and call lifecycle.useDataChannel
- / useDataChannelMessages — send/receive arbitrary data over an RTC data channel.useMediaStream
- , useScreenShare, useWebRTC — focused utilities for media capture and connection wiring.
- VideoPlayer, AudioPlayer — attach a MediaStream to media elements.StatusBadge
- , ErrorBanner — lightweight status UI.
mergeFeatures and defaultFeatures let you toggle capabilities (data channel, screen share, waiting room, host controls, active speaker detection) when calling useMeshRoom.
`tsx
import { useMeshRoom, VideoPlayer } from "@conference-kit/react";
function Mesh({
peerId,
room,
signalingUrl,
}: {
peerId: string;
room: string;
signalingUrl: string;
}) {
const mesh = useMeshRoom({
peerId,
room,
signalingUrl,
isHost: false,
mediaConstraints: { audio: true, video: true },
features: { enableWaitingRoom: true, enableHostControls: true },
});
return (
Signaling client
SignalingClient is exposed if you need to build a custom hook or UI. It handles reconnects and emits presence, signal, broadcast, and control events.Build
`bash
npm run build
`Outputs ESM and types to
dist/`.