@levelchat/web-react

Ergonomic React bindings for @levelchat/web — context provider, hooks, and signature-styled components on top of the vanilla SDK.

Install

npm install @levelchat/web @levelchat/web-react
# or
pnpm add @levelchat/web @levelchat/web-react
yarn add @levelchat/web @levelchat/web-react

@levelchat/web is a peer dependency — same WebRTC under the hood, the React layer is purely ergonomic.

We follow semver; pin major. Latest version: 0.2.x (update on release).

Hello room

'use client';
import { LevelChatProvider, useLocalParticipant, ParticipantGrid } from '@levelchat/web-react';

export default function Call() {
  return (
    <LevelChatProvider tokenEndpoint="/api/lc-token" room="r_demo" roomType="meeting">
      <ParticipantGrid />
      <Controls />
    </LevelChatProvider>
  );
}

function Controls() {
  const { toggleCamera, toggleMic, camOn, micOn } = useLocalParticipant();
  return (
    <>
      <button onClick={toggleCamera}>{camOn ? 'Camera off' : 'Camera on'}</button>
      <button onClick={toggleMic}>{micOn ? 'Mic off' : 'Mic on'}</button>
    </>
  );
}

tokenEndpoint should point at a route on YOUR backend that mints a room token via POST /v1/rooms/:id/tokens — never expose your project API key in the browser.

Hooks

| Hook | Returns | | ----------------------- | ------------------------------------------------ | | useRoom() | Active Room instance (or null while joining) | | useLocalParticipant() | Local participant + camera/mic toggles | | useParticipants() | Array of remote participants | | useConnectionState() | 'connecting' \| 'connected' \| 'reconnecting' |

Components

• <LevelChatProvider /> — context root, joins the room on mount.
• <ParticipantGrid /> — auto-laid-out tile grid using the signature VideoTile.
• <VideoTile /> — single-participant tile.
• <Controls /> (compose your own) — see hooks above.

License

MIT — see LICENSE.

See docs/api/02-sdk-parity.md for the cross-platform API parity matrix.