MicIndicator

MicIndicator is the small mic chip that lives on every participant tile and in the control bar. It exposes both a hook-driven mode (subscribes to a participant's live audio state) and a prop-driven mode (forces a state for demos or static surfaces).

Install

pnpm add @levelchat/react-components

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

Hook-driven inside a provider:

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

<MicIndicator participantId="user_42" />

Or prop-driven for previews and static demos:

<MicIndicator muted={false} surface="glass" size={28} />

Headless hook

The styled component delegates to useMicState. Use the hook directly if you want to render your own chip:

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

function MyChip({ participantId }) {
  const { muted } = useMicState({ participantId });
  return <span>{muted ? 'OFF' : 'LIVE'}</span>;
}

Theming

Two surface tiers cover the common contexts: glass for tile corners (semi-transparent backdrop over video) and plain for on-surface use (control bar). Both honour --lc-warning-solid / --lc-danger-solid for the muted state.

Props