LiveKitRoom

The LiveKitRoom component provides the room context to all its child components. It is generally the starting point of your LiveKit app and the root of the LiveKit component tree. It provides the room state as a React context to all child components, so you don't have to pass it yourself.

import { LiveKitRoom } from '@livekit/components-react';

<LiveKitRoom token="<livekit-token>" serverUrl="<url-to-livekit-server>" connect={true}>
  ...
</LiveKitRoom>

You can decide what features your room will provide. There are flags to activate audio, video and screen (screen share) for your room. For example: If you want to create a audio only app you would set video and screen to false.

Instead of just passing a boolean value, you can also pass an option object that gives fine-grained control over the given functionality. See props table for more info.

import { LiveKitRoom } from '@livekit/components-react';

const MyPage = () => (
  <LiveKitRoom
    audio={true}
    video={false}
    screen={false}
    serverUrl="<example.livekit.cloud>"
    token="<your-token>"
  >
    {/*...*/}
  </LiveKitRoom>
);

The LiveKitRoom component takes care of creating the room and providing the RoomContext for the child components. If more control over the room object is needed, a self created room can also be given to the component.

import { LiveKitRoom } from '@livekit/components-react';
import { Room } from 'livekit-client';

const MyPage = () => {
  const room = new Room({});
  return (
    <LiveKitRoom
      serverUrl="<example.livekit.cloud>"
      token="<your-token>"
      room={room}
    >
      {/*...*/}
    </LiveKitRoom>
  );
};