​

Features

• Conditional rendering based on the error state, customizable with the matcher pattern
• Dynamic data attributes for custom styling based on the current error state

​

Anatomy

Import the components and piece the parts together.

import * as Broadcast from "@livepeer/react/broadcast";

export default () => (
  <Broadcast.Root>
    <Broadcast.Container>
      <Broadcast.ErrorIndicator />
    </Broadcast.Container>
  </Broadcast.Root>
);

​

Props

The component accepts all props suitable for a div element, in addition to the following specific props:

​

forceMount

A boolean to force the component’s presence in the DOM, useful for controlling animations with external libraries.

​

matcher

A prop to define the condition under which the ErrorIndicator should be visible. It can be a string indicating a broad category of errors (like "all" or "not-permissions") or a more specific error type. Alternatively, it can be a function for custom logic, receiving the PlaybackError type and returning a boolean for whether it should be shown.

​

Data Attributes

​

data-livepeer-error-indicator

Always present to indicate the component’s role.

​

data-error-state

Indicates whether there is an error ("true" or "false").

​

data-error-type

Specifies the type of the current error or "none" if no error is present.

Could be one of: "offline" | "access-control" | "fallback" | "permissions" | "unknown" | "none"

​

data-visible

Reflects whether the indicator is currently visible ("true" or "false").

This is often used for dynamically applying enter/exit CSS animations.