@livekit/components-js-docs 0.0.0-20251021151641

package/generated-docs/react/connectionstatusprops.md

@@ -0,0 +1,24 @@
+---
+{
+  "title": "ConnectionStatusProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionState.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionStatusProps interface
+
+**Signature:**
+
+```typescript
+export interface ConnectionStatusProps extends React.HTMLAttributes<HTMLDivElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;
+
+## Properties
+
+| Property                                       | Type | Description                                                                 |
+| ---------------------------------------------- | ---- | --------------------------------------------------------------------------- |
+| [room?](./react/connectionstatusprops.room.md) | Room | _(Optional)_ The room from which the connection status should be displayed. |

package/generated-docs/react/connectionstatusprops.room.md

@@ -0,0 +1,15 @@
+---
+{ "title": "ConnectionStatusProps.room property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionStatusProps.room property
+
+The room from which the connection status should be displayed.
+
+**Signature:**
+
+```typescript
+room?: Room;
+```

package/generated-docs/react/controlbarcontrols.md

@@ -0,0 +1,23 @@
+---
+{
+  "title": "ControlBarControls type",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/ControlBar.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ControlBarControls type
+
+**Signature:**
+
+```typescript
+export type ControlBarControls = {
+  microphone?: boolean;
+  camera?: boolean;
+  chat?: boolean;
+  screenShare?: boolean;
+  leave?: boolean;
+  settings?: boolean;
+};
+```

package/generated-docs/react/controlbarprops.controls.md

@@ -0,0 +1,13 @@
+---
+{ "title": "ControlBarProps.controls property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ControlBarProps.controls property
+
+**Signature:**
+
+```typescript
+controls?: ControlBarControls;
+```

package/generated-docs/react/controlbarprops.md

@@ -0,0 +1,27 @@
+---
+{
+  "title": "ControlBarProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/ControlBar.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ControlBarProps interface
+
+**Signature:**
+
+```typescript
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;
+
+## Properties
+
+| Property                                                       | Type                                                        | Description                                                                                                                                                          |
+| -------------------------------------------------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [controls?](./react/controlbarprops.controls.md)               | [ControlBarControls](./react/controlbarcontrols.md)         | _(Optional)_                                                                                                                                                         |
+| [onDeviceError?](./react/controlbarprops.ondeviceerror.md)     | (error: { source: Track.Source; error: Error; }) =&gt; void | _(Optional)_                                                                                                                                                         |
+| [saveUserChoices?](./react/controlbarprops.saveuserchoices.md) | boolean                                                     | _(Optional)_ If <code>true</code>, the user's device choices will be persisted. This will enable the user to have the same device choices when they rejoin the room. |
+| [variation?](./react/controlbarprops.variation.md)             | 'minimal' \| 'verbose' \| 'textOnly'                        | _(Optional)_                                                                                                                                                         |

package/generated-docs/react/controlbarprops.ondeviceerror.md

@@ -0,0 +1,16 @@
+---
+{ "title": "ControlBarProps.onDeviceError property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ControlBarProps.onDeviceError property
+
+**Signature:**
+
+```typescript
+onDeviceError?: (error: {
+        source: Track.Source;
+        error: Error;
+    }) => void;
+```

package/generated-docs/react/controlbarprops.saveuserchoices.md

@@ -0,0 +1,21 @@
+---
+{ "title": "ControlBarProps.saveUserChoices property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ControlBarProps.saveUserChoices property
+
+{% callout type="note" variation="normal" %}
+
+This feature is experimental and may change or be removed based on developer feedback and real-world usage.
+
+{% /callout %}
+
+If `true`<!-- -->, the user's device choices will be persisted. This will enable the user to have the same device choices when they rejoin the room.
+
+**Signature:**
+
+```typescript
+saveUserChoices?: boolean;
+```

package/generated-docs/react/controlbarprops.variation.md

@@ -0,0 +1,13 @@
+---
+{ "title": "ControlBarProps.variation property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ControlBarProps.variation property
+
+**Signature:**
+
+```typescript
+variation?: 'minimal' | 'verbose' | 'textOnly';
+```

package/generated-docs/react/disconnectbuttonprops.md

@@ -0,0 +1,24 @@
+---
+{
+  "title": "DisconnectButtonProps interface",
+  "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. -->
+
+# DisconnectButtonProps interface
+
+**Signature:**
+
+```typescript
+export interface DisconnectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
+```
+
+**Extends:** React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;
+
+## Properties
+
+| Property                                                   | Type    | Description  |
+| ---------------------------------------------------------- | ------- | ------------ |
+| [stopTracks?](./react/disconnectbuttonprops.stoptracks.md) | boolean | _(Optional)_ |

package/generated-docs/react/disconnectbuttonprops.stoptracks.md

@@ -0,0 +1,13 @@
+---
+{ "title": "DisconnectButtonProps.stopTracks property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# DisconnectButtonProps.stopTracks property
+
+**Signature:**
+
+```typescript
+stopTracks?: boolean;
+```

package/generated-docs/react/focuslayoutcontainerprops.md

@@ -0,0 +1,18 @@
+---
+{
+  "title": "FocusLayoutContainerProps interface",
+  "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. -->
+
+# FocusLayoutContainerProps interface
+
+**Signature:**
+
+```typescript
+export interface FocusLayoutContainerProps extends React.HTMLAttributes<HTMLDivElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;

package/generated-docs/react/focuslayoutprops.md

@@ -0,0 +1,25 @@
+---
+{
+  "title": "FocusLayoutProps interface",
+  "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. -->
+
+# FocusLayoutProps interface
+
+**Signature:**
+
+```typescript
+export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLElement&gt;
+
+## Properties
+
+| Property                                                              | Type                                    | Description                                            |
+| --------------------------------------------------------------------- | --------------------------------------- | ------------------------------------------------------ |
+| [onParticipantClick?](./react/focuslayoutprops.onparticipantclick.md) | (evt: ParticipantClickEvent) =&gt; void | _(Optional)_                                           |
+| [trackRef?](./react/focuslayoutprops.trackref.md)                     | TrackReferenceOrPlaceholder             | _(Optional)_ The track to display in the focus layout. |

package/generated-docs/react/focuslayoutprops.onparticipantclick.md

@@ -0,0 +1,13 @@
+---
+{ "title": "FocusLayoutProps.onParticipantClick property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusLayoutProps.onParticipantClick property
+
+**Signature:**
+
+```typescript
+onParticipantClick?: (evt: ParticipantClickEvent) => void;
+```

package/generated-docs/react/focuslayoutprops.trackref.md

@@ -0,0 +1,15 @@
+---
+{ "title": "FocusLayoutProps.trackRef property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusLayoutProps.trackRef property
+
+The track to display in the focus layout.
+
+**Signature:**
+
+```typescript
+trackRef?: TrackReferenceOrPlaceholder;
+```

package/generated-docs/react/focustoggleprops.md

@@ -0,0 +1,24 @@
+---
+{
+  "title": "FocusToggleProps interface",
+  "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. -->
+
+# FocusToggleProps interface
+
+**Signature:**
+
+```typescript
+export interface FocusToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
+```
+
+**Extends:** React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;
+
+## Properties
+
+| Property                                          | Type                        | Description  |
+| ------------------------------------------------- | --------------------------- | ------------ |
+| [trackRef?](./react/focustoggleprops.trackref.md) | TrackReferenceOrPlaceholder | _(Optional)_ |

package/generated-docs/react/focustoggleprops.trackref.md

@@ -0,0 +1,13 @@
+---
+{ "title": "FocusToggleProps.trackRef property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusToggleProps.trackRef property
+
+**Signature:**
+
+```typescript
+trackRef?: TrackReferenceOrPlaceholder;
+```

package/generated-docs/react/formatchatmessagelinks.md

@@ -0,0 +1,16 @@
+---
+{
+  "title": "formatChatMessageLinks",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ChatEntry.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# formatChatMessageLinks
+
+**Signature:**
+
+```typescript
+export declare function formatChatMessageLinks(message: string): React.ReactNode;
+```

package/generated-docs/react/gridlayoutprops.children.md

@@ -0,0 +1,13 @@
+---
+{ "title": "GridLayoutProps.children property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# GridLayoutProps.children property
+
+**Signature:**
+
+```typescript
+children: React.ReactNode;
+```

package/generated-docs/react/gridlayoutprops.md

@@ -0,0 +1,25 @@
+---
+{
+  "title": "GridLayoutProps interface",
+  "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. -->
+
+# GridLayoutProps interface
+
+**Signature:**
+
+```typescript
+export interface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement>, Pick<UseParticipantsOptions, 'updateOnlyOn'>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;, Pick&lt;[UseParticipantsOptions](./react/useparticipantsoptions.md)<!-- -->, 'updateOnlyOn'&gt;
+
+## Properties
+
+| Property                                        | Type                            | Description |
+| ----------------------------------------------- | ------------------------------- | ----------- |
+| [children](./react/gridlayoutprops.children.md) | React.ReactNode                 |             |
+| [tracks](./react/gridlayoutprops.tracks.md)     | TrackReferenceOrPlaceholder\[\] |             |

package/generated-docs/react/gridlayoutprops.tracks.md

@@ -0,0 +1,13 @@
+---
+{ "title": "GridLayoutProps.tracks property" }
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# GridLayoutProps.tracks property
+
+**Signature:**
+
+```typescript
+tracks: TrackReferenceOrPlaceholder[];
+```

package/generated-docs/react/hook/useaudioplayback.md

@@ -0,0 +1,38 @@
+---
+{
+  "title": "useAudioPlayback",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useAudioPlayback.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useAudioPlayback
+
+{% callout type="note" variation="normal" %}
+
+This feature is experimental and may change or be removed based on developer feedback and real-world usage.
+
+{% /callout %}
+
+In many browsers to start audio playback, the user must perform a user-initiated event such as clicking a button. The `useAudioPlayback` hook returns an object with a boolean `canPlayAudio` flag that indicates whether audio playback is allowed in the current context, as well as a `startAudio` function that can be called in a button `onClick` callback to start audio playback in the current context.
+
+## Import
+
+```typescript
+import { useAudioPlayback } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="room" type="Room" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  canPlayAudio: boolean;
+  startAudio: () => Promise<void>;
+}
+```

package/generated-docs/react/hook/useaudiowaveform.md

@@ -0,0 +1,44 @@
+---
+{
+  "title": "useAudioWaveform",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useTrackVolume.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useAudioWaveform
+
+{% 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 { useAudioWaveform } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="options.barCount" type="number" optional=true %}
+{% /parameter %}
+
+{% parameter name="options.updateInterval" type="number" optional=true %}
+{% /parameter %}
+
+{% parameter name="options.volMultiplier" type="number" optional=true %}
+{% /parameter %}
+
+{% parameter name="trackOrTrackReference" type="LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    bars: number[];
+}
+```

package/generated-docs/react/hook/usechat.md

@@ -0,0 +1,55 @@
+---
+{
+  "title": "useChat",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useChat.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useChat
+
+The `useChat` hook provides chat functionality for a LiveKit room.
+
+## Import
+
+```typescript
+import { useChat } from "@livekit/components-react";
+```
+
+## Remarks
+
+Message history is not persisted and will be lost if the component is refreshed. You may want to persist message history in the browser, a cache or a database.
+
+## Usage
+
+```tsx
+function ChatComponent() {
+  const { chatMessages, send, isSending } = useChat();
+
+  return (
+    <div>
+      {chatMessages.map((msg) => (
+        <div key={msg.timestamp}>
+          {msg.from?.identity}: {msg.message}
+        </div>
+      ))}
+      <button disabled={isSending} onClick={() => send("Hello!")}>
+        Send Message
+      </button>
+    </div>
+  );
+}
+```
+
+## Returns
+
+An object containing: - `chatMessages` - Array of received chat messages - `send` - Function to send a new message - `isSending` - Boolean indicating if a message is currently being sent
+
+```typescript
+{
+    send: (message: string, options?: import('livekit-client').SendTextOptions) => Promise<ReceivedChatMessage>;
+    chatMessages: ReceivedChatMessage[];
+    isSending: boolean;
+}
+```

package/generated-docs/react/hook/usechattoggle.md

@@ -0,0 +1,40 @@
+---
+{
+  "title": "useChatToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useChatToggle.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useChatToggle
+
+The `useChatToggle` hook provides state and functions for toggling the chat window.
+
+## Import
+
+```typescript
+import { useChatToggle } from "@livekit/components-react";
+```
+
+## Remarks
+
+Depends on the `LayoutContext` to work properly.
+
+## Properties
+
+{% parameter name="{ props }.props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    mergedProps: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        className: string;
+        onClick: () => void;
+        'aria-pressed': string;
+        'data-lk-unread-msgs': string;
+    };
+}
+```

package/generated-docs/react/hook/useclearpinbutton.md

@@ -0,0 +1,30 @@
+---
+{
+  "title": "useClearPinButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useClearPinButton.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useClearPinButton
+
+The `useClearPinButton` hook provides props for the [ClearPinButton()](./react/component/clearpinbutton.md) or your custom implementation of it component. It adds the `onClick` handler to signal the `LayoutContext` that the tile in focus should be cleared.
+
+## Import
+
+```typescript
+import { useClearPinButton } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+{
+    buttonProps: ClearPinButtonProps & {
+        className: string;
+        disabled: boolean;
+        onClick: () => void;
+    };
+}
+```

package/generated-docs/react/hook/useconnectionqualityindicator.md

@@ -0,0 +1,40 @@
+---
+{
+  "title": "useConnectionQualityIndicator",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useConnectionQualityIndicator.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useConnectionQualityIndicator
+
+The `useConnectionQualityIndicator` hook provides props for the `ConnectionQualityIndicator` or your custom implementation of it component.
+
+## Import
+
+```typescript
+import { useConnectionQualityIndicator } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { quality } = useConnectionQualityIndicator();
+// or
+const { quality } = useConnectionQualityIndicator({ participant });
+```
+
+## Properties
+
+{% parameter name="options.participant" type="Participant" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  className: "lk-connection-quality";
+  quality: ConnectionQuality;
+}
+```