PollPanel

PollPanel renders live in-call polls — list of open + closed polls, vote buttons with progress bars, and (when isHost is true) a composer at the bottom for posting a new poll with 2–6 options. Composes usePolls.

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 { PollPanel } from '@levelchat/react-components';

<PollPanel isHost={isHost} className="h-full w-80" />

Host composer

Hosts get the composer at the bottom. Each poll supports 2–6 options, an optional anonymous mode, optional auto-close timer, and a "show results live" toggle. Server enforces all caps; we don't double-validate client-side.

Live vs. post-close results

Set by the poll creator (server-side, on the poll record) — the panel reads poll.liveResults off the live poll and renders accordingly. This is not a prop on <PollPanel>; the component honors whatever the host configured.

• poll.liveResults === true — vote bars + percentages render the moment a vote lands.
• poll.liveResults === false — bars stay hidden until the poll closes (or the host taps Close poll).

Props