Features
- Synchronizes broadcast status with a visual indicator
Anatomy
Import the components and piece the parts together.
import * as Broadcast from "@livepeer/react/broadcast";
export default () => (
<Broadcast.Root>
<Broadcast.Container>
<Broadcast.StatusIndicator />
</Broadcast.Container>
<Broadcast.Container>
<Broadcast.Controls>
<Broadcast.StatusIndicator />
</Broadcast.Controls>
</Broadcast.Container>
</Broadcast.Root>
);
Props
forceMount
A boolean that, when true, ensures the component is always mounted. This is
particularly useful for managing animations with external animation libraries.
matcher
A prop required to define the conditions under which the StatusIndicator
should be visible. It can be a specific BroadcastStatus value or a function
that provides custom logic for visibility determination based on the broadcast
status.
The status can be of the type: "live" | "pending" | "idle"
Data Attributes
data-livepeer-controls-status-indicator
Serves to identify the component’s role within the broadcast interface.
data-status
Shows the current broadcast status as a string.
The status can be of the type: "live" | "pending" | "idle"
data-visible
Reflects the visibility status of the indicator, with "true" meaning it’s
currently visible based on the matcher or broadcast status and "false"
denoting it’s not visible. Last modified on February 18, 2026
