Contexts

Contexts are used allow child components to access parent state without the need to pass it via props down the component tree. In return this means that if a component depends on some context you have to make sure that this context is provided some where up the component tree.

Copied!
// ✅ This works!
// ConnectionState depends on the RoomContext which is provided by LiveKitRoom.
<LiveKitRoom>
  <ConnectionState />
</LiveKitRoom>

// ✅ This works!
// The context provider (LiveKitRoom) does not have to be a immediate parent of the component (ConnectionState) needing the context.
<LiveKitRoom>
    <div>
        <ConnectionState />
    </div>
</LiveKitRoom>

// ❌ This will cause an error!
// ConnectionState depends on a parent component to provide the RoomContext.
<LiveKitRoom></LiveKitRoom>
<ConnectionState />

If you only use LiveKit Components without creating custom components yourself, you don't need to interact with the contexts. Just make sure that the component tree meets the context requirements of all components. If it doesn't, you'll get an error message telling you which context is missing.

The two most important contexts are:

The RoomContext provides the Room object as a context.

Copied!
/* 1️⃣ LiveKitRoom provides the RoomContext. */
<LiveKitRoom serverUrl="server-url" token="user-access-token" connect={true}>
  {/* 2️⃣ ConnectionState uses the RoomContext to retrieve information about the connection state of the room. */}
  <ConnectionState />
</LiveKitRoom>

The ParticipantContext provides a Participant object to all child components.

Copied!
/* 1️⃣ ParticipantView provides the ParticipantContext. */
<ParticipantView>
  {/* 2️⃣ ParticipantName uses the ParticipantContext to get the participant name. */}
  <ParticipantName />
</ParticipantView>