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/webBasic 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
| Prop | Type | Default | Notes |
|---|---|---|---|
onReject | (entry) => Promise<string | null> | string | null | — | Called on Reject — return a reason string (or a promise of one) to record why. The sticky "Admit all" CTA appears once 3+ requests are pending. |
hideWhenEmpty | boolean | false | Render nothing when the queue is empty instead of an empty-state panel. |
className | string | — | Container override. |