npm i @livekit/react-core


React component and library for LiveKit

by livekit

1.1.0 (see all)License:Apache-2.0TypeScript:Built-In
npm i @livekit/react-core

Livekit React Core


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

Using hooks

The provided components make use of two hooks: useRoom and useParticipant, they will help you manage internal LiveKit callbacks and map them into state variables that are ready-to-use from React components.

Using the connect function returned by useRoom will ensure that callbacks are registered automatically and the other state variables are updated when changes take place in the room.

import { useRoom, useParticipant } from '@livekit/react-core'

export const MyComponent = () => {
  const roomOptions: RoomOptions = {
    adaptiveStream: true,
    dynacast: true,
  const { connect, isConnecting, room, error, participants, audioTracks } = useRoom(roomOptions);

  async function init() {
    // initiate connection to the livekit room
    await connect(livekitUrl, livekitToken);
    // request camera and microphone permissions and publish tracks
    await room.localParticipant.enableCameraAndMicrophone();

  useEffect(() => {
  }, [])

  return (...)

export const ParticipantRenderer = ({ participant }) => {
  const { isSpeaking, subscribedTracks } = useParticipant(participant)

Rendering video and audio

When building your custom UI, it's helpful to use track renderers that are provided in this library. AudioRenderer and VideoRenderer would render an audio and video track, respectively.

No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

No reviews found
Be the first to rate