noop(); pop(); map();

    This package has been deprecated

    Author message:

    livekit-react has been renamed to @livekit/react-components

    TypeScript icon, indicating that this package has built-in type declarations

    0.9.2 • Public • Published

    LiveKit React Component Library

    This package provides React components that makes it easier to use LiveKit in a React app.


    npm install --save livekit-react


    Source available in example


    Note: Currently this library isn't compatible with React.StrictMode. We are working on improvements in this area.

    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'
    // CSS should be explicitly imported if using the default UI
    import 'livekit-react/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)}/>
    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/> }}

    Using custom 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'
    export const MyComponent = () => {
      const roomOptions: RoomOptions = {
        adaptiveStream: true,
        dynacast: true,
      const { connect, isConnecting, room, error, participants, audioTracks } = useRoom(roomOptions);
      // initiate connection to the livekit room
      await connect(livekitUrl, livekitToken);
      // request camera and microphone permissions and publish tracks
    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.




    npm i livekit-react

    DownloadsWeekly Downloads






    Unpacked Size

    397 kB

    Total Files


    Last publish


    • ocupe_livekit
    • cacheonly
    • mdo
    • duanweiwei
    • benjaminlivekit
    • danm_livekit
    • feepslk
    • lukasio
    • cnderrauber
    • lk_hiroshi
    • dliulk
    • dc-livekit
    • shishir.gowda
    • raja-livekit
    • livekitherzog
    • noahlt-livekit
    • matkam_livekit
    • thedavidzhao
    • rdsa