@livekit/react-components

LiveKit React Component Library

This package provides pre styled React components that makes it easy to use LiveKit in a React app.

Install

npm install --save @livekit/react-components livekit-client

Demo

https://example.livekit.io.

Source available in example

Usage

Video room with built-in UI

Without customization, the component would use a default skin as seen in the demo above.

import { LiveKitRoom } from '@livekit/react-components';
// CSS should be explicitly imported if using the default UI
import '@livekit/react-components/dist/index.css';
// used by the default ParticipantView to maintain video aspect ratio.
// this CSS must be imported globally
// if you are using a custom Participant renderer, this import isn't necessary.
import 'react-aspect-ratio/aspect-ratio.css';

export const RoomPage = () => {
  const url = 'wss://your_host';
  const token = 'your_token';
  return (
    <div className="roomContainer">
      <LiveKitRoom url={url} token={token} onConnected={(room) => onConnected(room)} />
    </div>
  );
};

async function onConnected(room) {
  await room.localParticipant.setCameraEnabled(true);
  await room.localParticipant.setMicrophoneEnabled(true);
}

Customize rendering

To provide your own rendering, override one or more of stageRenderer, participantRenderer, and controlRenderer. It's possible customize a single renderer and use defaults for the others.

export const RoomPage = () => {
  const url = 'wss://your_host';
  const token = 'your_token';
  return (
    <LiveKitRoom
      url={url}
      token={token}
      // stageRenderer renders the entire stage
      stageRenderer={(props: StageProps) => {
        return <div />;
      }}
      // participantRenderer renders a single participant
      participantRenderer={(props: ParticipantProps) => {
        return <div />;
      }}
      // controlRenderer renders the control bar
      controlRenderer={(props: ControlsProps) => {
        return <div />;
      }}
    />
  );
};