WaitingRoom

WaitingRoom is the host-side queue: every pending joiner appears as a row with their display name + optional join-reason note, with Admit / Reject buttons. A sticky "Admit all" CTA appears once the queue has 3+ pending requests.

Install

pnpm add @levelchat/react-components @levelchat/web

Requirements

• React — react and react-dom ^18 || ^19 (peer dependency).
• LevelChat Web SDK — @levelchat/web ^0.2.4 (peer dependency, wires hook-driven mode to the live Room).
• Provider — wrap the tree in <LevelChatProvider> from @levelchat/web-react so hook-driven mode can subscribe to room events. Prop-driven demos work without it.
• Styles — import the brand tokens + kit stylesheet exactly once at the app entry, before any kit component renders.

In Next.js (App Router), import the stylesheets at the top of your root layout:

// app/layout.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

In Vite (or any plain React app), import them at the top of your entry module:

// src/main.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

Basic usage

import { WaitingRoom } from '@levelchat/react-components';

<WaitingRoom className="h-96 w-80" />

Headless hook

import { useWaitingRoom } from '@levelchat/react-components';

function MyQueue() {
  const { entries, admit, reject, admitAll, supported } = useWaitingRoom();
  if (!supported) return null;
  return (
    <ul>
      {entries.map((e) => (
        <li key={e.id}>
          {e.displayName}
          <button onClick={() => admit(e.id)}>Admit</button>
          <button onClick={() => reject(e.id)}>Reject</button>
        </li>
      ))}
      {entries.length >= 3 && <button onClick={admitAll}>Admit all</button>}
    </ul>
  );
}

Props