@livekit/components-js-docs 0.0.0-20251021151641

package/generated-docs/react/component/disconnectbutton.md

@@ -0,0 +1,33 @@
+---
+{
+  "title": "DisconnectButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/DisconnectButton.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# DisconnectButton
+
+The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room. Normally this is the big red button that allows end users to leave the video or audio call.
+
+## Import
+
+```typescript
+import { DisconnectButton } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <DisconnectButton>Leave room</DisconnectButton>
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="stopTracks" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/focuslayout.md

@@ -0,0 +1,30 @@
+---
+{
+  "title": "FocusLayout",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/FocusLayout.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusLayout
+
+The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
+
+## Import
+
+```typescript
+import { FocusLayout } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="onParticipantClick" type="(evt: ParticipantClickEvent) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track to display in the focus layout.
+
+{% /parameter %}

package/generated-docs/react/component/focuslayoutcontainer.md

@@ -0,0 +1,18 @@
+---
+{
+  "title": "FocusLayoutContainer",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/FocusLayout.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusLayoutContainer
+
+The `FocusLayoutContainer` is a layout component that expects two children: A small side component: In a video conference, this is usually a carousel of participants who are not in focus. And a larger main component to display the focused participant. For example, with the `FocusLayout` component.
+
+## Import
+
+```typescript
+import { FocusLayoutContainer } from "@livekit/components-react";
+```

package/generated-docs/react/component/focustoggle.md

@@ -0,0 +1,37 @@
+---
+{
+  "title": "FocusToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/FocusToggle.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusToggle
+
+The `FocusToggle` puts the `ParticipantTile` in focus or removes it from focus.
+
+## Import
+
+```typescript
+import { FocusToggle } from "@livekit/components-react";
+```
+
+## Remarks
+
+This component needs to live inside `LayoutContext` to work properly.
+
+## Usage
+
+```tsx
+<ParticipantTile>
+  <FocusToggle />
+</ParticipantTile>
+```
+
+## Properties
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/gridlayout.md

@@ -0,0 +1,40 @@
+---
+{
+  "title": "GridLayout",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/GridLayout.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# GridLayout
+
+The `GridLayout` component displays the nested participants in a grid where every participants has the same size. It also supports pagination if there are more participants than the grid can display.
+
+## Import
+
+```typescript
+import { GridLayout } from "@livekit/components-react";
+```
+
+## Remarks
+
+To ensure visual stability when tiles are reordered due to track updates, the component uses the `useVisualStableUpdate` hook.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <GridLayout tracks={tracks}>
+    <ParticipantTile />
+  </GridLayout>
+<LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="children" type="React.ReactNode" optional=false %}
+{% /parameter %}
+
+{% parameter name="tracks" type="TrackReferenceOrPlaceholder[]" optional=false %}
+{% /parameter %}

package/generated-docs/react/component/layoutcontext.md

@@ -0,0 +1,16 @@
+---
+{
+  "title": "LayoutContext",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/layout-context.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# LayoutContext
+
+## Import
+
+```typescript
+import { LayoutContext } from "@livekit/components-react";
+```

package/generated-docs/react/component/layoutcontextprovider.md

@@ -0,0 +1,39 @@
+---
+{
+  "title": "LayoutContextProvider",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/LayoutContextProvider.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# LayoutContextProvider
+
+{% callout type="note" variation="normal" %}
+
+This feature is experimental and may change or be removed based on developer feedback and real-world usage.
+
+{% /callout %}
+
+## Import
+
+```typescript
+import { LayoutContextProvider } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="onPinChange" type="(state: PinState) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onWidgetChange" type="(state: WidgetState) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="value" type="LayoutContextType" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/livekitroom.md

@@ -0,0 +1,103 @@
+---
+{
+  "title": "LiveKitRoom",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/LiveKitRoom.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# 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
+
+```typescript
+import { LiveKitRoom } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom token="<livekit-token>" serverUrl="<url-to-livekit-server>" connect={true}>
+  ...
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="serverUrl" type="string | undefined" optional=false %}
+URL to the LiveKit server. For example: `wss://<domain>.livekit.cloud` To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string url can the connection be established.
+
+{% /parameter %}
+
+{% parameter name="token" type="string | undefined" optional=false %}
+A user specific access token for a client to authenticate to the room. This token is necessary to establish a connection to the room. To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string token can the connection be established.
+
+{% /parameter %}
+
+{% parameter name="audio" type="AudioCaptureOptions | boolean" optional=true %}
+_(Optional)_ Publish audio immediately after connecting to your LiveKit room.
+
+{% /parameter %}
+
+{% parameter name="connect" type="boolean" optional=true %}
+_(Optional)_ If set to true a connection to LiveKit room is initiated.
+
+{% /parameter %}
+
+{% parameter name="connectOptions" type="RoomConnectOptions" optional=true %}
+_(Optional)_ Define options how to connect to the LiveKit server.
+
+{% /parameter %}
+
+{% parameter name="onConnected" type="() => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onDisconnected" type="(reason?: DisconnectReason) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onEncryptionError" type="(error: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onError" type="(error: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onMediaDeviceFailure" type="(failure?: MediaDeviceFailure) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="options" type="RoomOptions" optional=true %}
+_(Optional)_ Options for when creating a new room. When you pass your own room instance to this component, these options have no effect. Instead, set the options directly in the room instance.
+
+{% /parameter %}
+
+{% parameter name="room" type="Room" optional=true %}
+_(Optional)_ Optional room instance. By passing your own room instance you overwrite the `options` parameter, make sure to set the options directly on the room instance itself.
+
+{% /parameter %}
+
+{% parameter name="screen" type="ScreenShareCaptureOptions | boolean" optional=true %}
+_(Optional)_ Publish screen share immediately after connecting to your LiveKit room.
+
+{% /parameter %}
+
+{% parameter name="simulateParticipants" type="number | undefined" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="video" type="VideoCaptureOptions | boolean" optional=true %}
+_(Optional)_ Publish video immediately after connecting to your LiveKit room.
+
+{% /parameter %}

package/generated-docs/react/component/mediadevicemenu.md

@@ -0,0 +1,57 @@
+---
+{
+  "title": "MediaDeviceMenu",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/MediaDeviceMenu.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# MediaDeviceMenu
+
+The `MediaDeviceMenu` component is a button that opens a menu that lists all media devices and allows the user to select them.
+
+## Import
+
+```typescript
+import { MediaDeviceMenu } from "@livekit/components-react";
+```
+
+## Remarks
+
+This component is implemented with the `MediaDeviceSelect` LiveKit components.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <MediaDeviceMenu />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="initialSelection" type="string" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="kind" type="MediaDeviceKind" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onActiveDeviceChange" type="(kind: MediaDeviceKind, deviceId: string) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="requestPermissions" type="boolean" optional=true %}
+_(Optional)_ this will call getUserMedia if the permissions are not yet given to enumerate the devices with device labels. in some browsers multiple calls to getUserMedia result in multiple permission prompts. It's generally advised only flip this to true, once a (preview) track has been acquired successfully with the appropriate permissions.
+
+{% /parameter %}
+
+{% parameter name="tracks" type="Partial<Record<MediaDeviceKind, LocalAudioTrack | LocalVideoTrack | undefined>>" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/mediadeviceselect.md

@@ -0,0 +1,71 @@
+---
+{
+  "title": "MediaDeviceSelect",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/MediaDeviceSelect.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# MediaDeviceSelect
+
+The `MediaDeviceSelect` list all media devices of one kind. Clicking on one of the listed devices make it the active media device.
+
+## Import
+
+```typescript
+import { MediaDeviceSelect } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <MediaDeviceSelect kind="audioinput" />
+</LiveKitRoom>
+```
+
+## Properties
+
+{% parameter name="kind" type="MediaDeviceKind" optional=false %}
+{% /parameter %}
+
+{% parameter name="exactMatch" type="boolean" optional=true %}
+_(Optional)_ will force the browser to only return the specified device will call `onDeviceSelectError` with the error in case this fails
+
+{% /parameter %}
+
+{% parameter name="initialSelection" type="string" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onActiveDeviceChange" type="(deviceId: string) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onDeviceListChange" type="(devices: MediaDeviceInfo[]) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onDeviceSelectError" type="(e: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onError" type="(e: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="requestPermissions" type="boolean" optional=true %}
+_(Optional)_ this will call getUserMedia if the permissions are not yet given to enumerate the devices with device labels. in some browsers multiple calls to getUserMedia result in multiple permission prompts. It's generally advised only flip this to true, once a (preview) track has been acquired successfully with the appropriate permissions.
+
+{% /parameter %}
+
+{% parameter name="track" type="LocalAudioTrack | LocalVideoTrack" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/participantaudiotile.md

@@ -0,0 +1,41 @@
+---
+{
+  "title": "ParticipantAudioTile",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantAudioTile.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantAudioTile
+
+The `ParticipantAudioTile` component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the `TileLoop` or independently if a participant is passed as a property.
+
+## Import
+
+```typescript
+import { ParticipantAudioTile } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<ParticipantAudioTile />
+```
+
+## Properties
+
+{% parameter name="disableSpeakingIndicator" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onParticipantClick" type="(event: ParticipantClickEvent) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
+
+{% /parameter %}

package/generated-docs/react/component/participantcontext.md

@@ -0,0 +1,16 @@
+---
+{
+  "title": "ParticipantContext",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/participant-context.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantContext
+
+## Import
+
+```typescript
+import { ParticipantContext } from "@livekit/components-react";
+```

package/generated-docs/react/component/participantcontextifneeded.md

@@ -0,0 +1,26 @@
+---
+{
+  "title": "ParticipantContextIfNeeded",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantTile.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantContextIfNeeded
+
+The `ParticipantContextIfNeeded` component only creates a `ParticipantContext` if there is no `ParticipantContext` already.
+
+## Import
+
+```typescript
+import { ParticipantContextIfNeeded } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<ParticipantContextIfNeeded participant={trackReference.participant}>
+  ...
+</ParticipantContextIfNeeded>
+```

package/generated-docs/react/component/participantloop.md

@@ -0,0 +1,43 @@
+---
+{
+  "title": "ParticipantLoop",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ParticipantLoop.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantLoop
+
+The `ParticipantLoop` component loops over an array of participants to create a context for every participant. This component takes exactly one child component as a template. By providing your own template as a child you have full control over the look and feel of your participant representations.
+
+## Import
+
+```typescript
+import { ParticipantLoop } from "@livekit/components-react";
+```
+
+## Remarks
+
+If you want to loop over individual tracks instead of participants, you can use the `TrackLoop` component.
+
+## Usage
+
+```tsx
+const participants = useParticipants();
+<ParticipantLoop participants={participants}>
+  <ParticipantName />
+</ParticipantLoop>;
+```
+
+## Properties
+
+{% parameter name="children" type="React.ReactNode" optional=false %}
+The template component to be used in the loop.
+
+{% /parameter %}
+
+{% parameter name="participants" type="Participant[]" optional=false %}
+The participants to loop over. Use `useParticipants()` hook to get participants.
+
+{% /parameter %}

package/generated-docs/react/component/participantname.md

@@ -0,0 +1,24 @@
+---
+{
+  "title": "ParticipantName",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantName.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantName
+
+The `ParticipantName` component displays the name of the participant as a string within an HTML span element. If no participant name is undefined the participant identity string is displayed.
+
+## Import
+
+```typescript
+import { ParticipantName } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<ParticipantName />
+```

package/generated-docs/react/component/participanttile.md

@@ -0,0 +1,55 @@
+---
+{
+  "title": "ParticipantTile",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantTile.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantTile
+
+The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
+
+## Import
+
+```typescript
+import { ParticipantTile } from "@livekit/components-react";
+```
+
+## Usage
+
+### Using the
+
+`ParticipantTile` component with a track reference:
+
+```tsx
+<ParticipantTile trackRef={trackRef} />
+```
+
+### Using the
+
+`ParticipantTile` component as a child of the `TrackLoop` component:
+
+```tsx
+<TrackLoop>
+  <ParticipantTile />
+</TrackLoop>
+```
+
+## Properties
+
+{% parameter name="disableSpeakingIndicator" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onParticipantClick" type="(event: ParticipantClickEvent) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
+
+{% /parameter %}