PinnedTileBar renders the set of pinned participants in a horizontal filmstrip above or below the main grid. Returns null when no participants are pinned (zero-cost when unused).
Install
pnpm add @levelchat/react-components @levelchat/webBasic usage
import { PinnedTileBar, ParticipantGrid } from '@levelchat/react-components';
<>
<PinnedTileBar maxPinned={4} />
<ParticipantGrid />
</>Pin semantics
- Server pins — broadcast pins set by a host. Everyone in the room sees the same pinned set.
- Local pins — per-viewer overrides. Layered on top of server pins; not broadcast.
- Deduplication + cap at
maxPinned(default 8). Server pins lead.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
maxPinned | number | 8 | Visible tile cap. |
hideUnpin | boolean | false | Hide the per-tile Unpin button. |
renderTile | (id, name) => ReactNode | — | Replace the default VideoTile (e.g. for a thumbnail-only render). |