@livekit/components-js-docs 0.0.0-20251021151641

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

@@ -0,0 +1,49 @@
+---
+{
+  "title": "useParticipants",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useParticipants.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useParticipants
+
+The `useParticipants` hook returns all participants (local and remote) of the current room.
+
+## Import
+
+```typescript
+import { useParticipants } from "@livekit/components-react";
+```
+
+## Remarks
+
+To optimize performance, you can use the `updateOnlyOn` property to decide on what `RoomEvents` the hook updates.
+
+## Usage
+
+```tsx
+const participants = useParticipants();
+<ParticipantLoop participants={participants}>
+  <ParticipantName />
+</ParticipantLoop>;
+```
+
+## Properties
+
+{% parameter name="options.room" type="Room" optional=true %}
+The room to use. If not provided, the hook will use the room from the context.
+
+{% /parameter %}
+
+{% parameter name="options.updateOnlyOn" type="RoomEvent[]" optional=true %}
+To optimize performance, you can use the `updateOnlyOn` property to decide on what RoomEvents the hook updates. By default it updates on all relevant RoomEvents to keep the returned participants array up to date. The minimal set of non-overwriteable `RoomEvents` is: `[RoomEvent.ParticipantConnected, RoomEvent.ParticipantDisconnected, RoomEvent.ConnectionStateChanged]`
+
+{% /parameter %}
+
+## Returns
+
+```typescript
+(import('livekit-client').RemoteParticipant | import('livekit-client').LocalParticipant)[]
+```

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

@@ -0,0 +1,46 @@
+---
+{
+  "title": "useParticipantTile",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useParticipantTile.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useParticipantTile
+
+The `useParticipantTile` hook is used to implement the `ParticipantTile` and returns the props needed to render the tile.
+
+## Import
+
+```typescript
+import { useParticipantTile } from "@livekit/components-react";
+```
+
+## Remarks
+
+The returned props include many data attributes that are useful for CSS styling purposes because they indicate the state of the participant and the track. For example: `data-lk-audio-muted`<!-- -->, `data-lk-video-muted`<!-- -->, `data-lk-speaking`<!-- -->, `data-lk-local-participant`<!-- -->, `data-lk-source`<!-- -->, `data-lk-facing-mode`<!-- -->.
+
+## Properties
+
+{% parameter name="{ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, }.htmlProps" type="React.HTMLAttributes<T>" optional=false %}
+{% /parameter %}
+
+{% parameter name="{ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, }.disableSpeakingIndicator" type="boolean" optional=true %}
+{% /parameter %}
+
+{% parameter name="{ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, }.onParticipantClick" type="(event: ParticipantClickEvent) => void" optional=true %}
+{% /parameter %}
+
+{% parameter name="{ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, }.trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+The track reference to display.
+
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  elementProps: React.HTMLAttributes<T>;
+}
+```

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

@@ -0,0 +1,32 @@
+---
+{
+  "title": "useParticipantTracks",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useParticipantTracks.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useParticipantTracks
+
+`useParticipantTracks` is a custom React that allows you to get tracks of a specific participant only, by specifiying the participant's identity. If the participant identity is not passed the hook will try to get the participant from a participant context.
+
+## Import
+
+```typescript
+import { useParticipantTracks } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="sources" type="Track.Source[]" optional=false %}
+{% /parameter %}
+
+{% parameter name="participantIdentity" type="string" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+TrackReference[]
+```

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

@@ -0,0 +1,54 @@
+---
+{
+  "title": "usePersistentUserChoices",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/usePersistentUserChoices.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# usePersistentUserChoices
+
+{% callout type="note" variation="normal" %}
+
+This feature is experimental and may change or be removed based on developer feedback and real-world usage.
+
+{% /callout %}
+
+A hook that provides access to user choices stored in local storage, such as selected media devices and their current state (on or off), as well as the user name.
+
+## Import
+
+```typescript
+import { usePersistentUserChoices } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="options.defaults" type="Partial<LocalUserChoices>" optional=true %}
+The default value to use if reading from local storage returns no results or fails.
+
+{% /parameter %}
+
+{% parameter name="options.preventLoad" type="boolean" optional=true %}
+Whether to prevent loading user choices from persistent storage and use `defaults` instead.
+
+{% /parameter %}
+
+{% parameter name="options.preventSave" type="boolean" optional=true %}
+Whether to prevent saving to persistent storage.
+
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    userChoices: LocalUserChoices;
+    saveAudioInputEnabled: (isEnabled: boolean) => void;
+    saveVideoInputEnabled: (isEnabled: boolean) => void;
+    saveAudioInputDeviceId: (deviceId: string) => void;
+    saveVideoInputDeviceId: (deviceId: string) => void;
+    saveUsername: (username: string) => void;
+}
+```

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

@@ -0,0 +1,39 @@
+---
+{
+  "title": "usePinnedTracks",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/usePinnedTracks.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# usePinnedTracks
+
+The `usePinnedTracks` hook returns a array of the pinned tracks of the current room.
+
+## Import
+
+```typescript
+import { usePinnedTracks } from "@livekit/components-react";
+```
+
+## Remarks
+
+To function properly, this hook must be called within a `LayoutContext`<!-- -->.
+
+## Usage
+
+```tsx
+const pinnedTracks = usePinnedTracks();
+```
+
+## Properties
+
+{% parameter name="layoutContext" type="LayoutContextType" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+TrackReferenceOrPlaceholder[]
+```

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

@@ -0,0 +1,43 @@
+---
+{
+  "title": "usePreviewDevice",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/PreJoin.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# usePreviewDevice
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated: use `usePreviewTracks` instead
+
+{% /callout %}
+
+## Import
+
+```typescript
+import { usePreviewDevice } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="deviceId" type="string" optional=false %}
+{% /parameter %}
+
+{% parameter name="enabled" type="boolean" optional=false %}
+{% /parameter %}
+
+{% parameter name="kind" type="'videoinput' | 'audioinput'" optional=false %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  selectedDevice: MediaDeviceInfo | undefined;
+  localTrack: T | undefined;
+  deviceError: Error | null;
+}
+```

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

@@ -0,0 +1,27 @@
+---
+{
+  "title": "usePreviewTracks",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/PreJoin.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# usePreviewTracks
+
+## Import
+
+```typescript
+import { usePreviewTracks } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="onError" type="(err: Error) => void" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+(LocalTrack < Track.Kind > []) | undefined;
+```

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

@@ -0,0 +1,44 @@
+---
+{
+  "title": "useRemoteParticipant",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useRemoteParticipant.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useRemoteParticipant
+
+The `useRemoteParticipant` hook returns the first RemoteParticipant by either identity and/or based on the participant kind.
+
+## Import
+
+```typescript
+import { useRemoteParticipant } from "@livekit/components-react";
+```
+
+## Remarks
+
+To optimize performance, you can use the `updateOnlyOn` property to decide on what `ParticipantEvents` the hook updates.
+
+## Usage
+
+```tsx
+const participant = useRemoteParticipant({ kind: ParticipantKind.Agent, identity: "myAgent" });
+```
+
+## Properties
+
+{% parameter name="identifier" type="ParticipantIdentifier" optional=false %}
+{% /parameter %}
+
+{% parameter name="options.updateOnlyOn" type="ParticipantEvent[]" optional=true %}
+To optimize performance, you can use the `updateOnlyOn` property to decide on what `ParticipantEvents` the hook updates. By default it updates on all relevant ParticipantEvents to keep the returned participant up to date.
+
+{% /parameter %}
+
+## Returns
+
+```typescript
+RemoteParticipant | undefined;
+```

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

@@ -0,0 +1,49 @@
+---
+{
+  "title": "useRemoteParticipants",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useRemoteParticipants.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useRemoteParticipants
+
+The `useRemoteParticipants` hook returns all remote participants (without the local) of the current room.
+
+## Import
+
+```typescript
+import { useRemoteParticipants } from "@livekit/components-react";
+```
+
+## Remarks
+
+To optimize performance, you can use the `updateOnlyOn` property to decide on what `RoomEvents` the hook updates.
+
+## Usage
+
+```tsx
+const participants = useRemoteParticipants();
+<ParticipantLoop participants={participants}>
+  <ParticipantName />
+</ParticipantLoop>;
+```
+
+## Properties
+
+{% parameter name="options.room" type="Room" optional=true %}
+The room to use. If not provided, the hook will use the room from the context.
+
+{% /parameter %}
+
+{% parameter name="options.updateOnlyOn" type="RoomEvent[]" optional=true %}
+To optimize performance, you can use the `updateOnlyOn` property to decide on what RoomEvents the hook updates. By default it updates on all relevant RoomEvents to keep the returned participants array up to date. The minimal set of non-overwriteable `RoomEvents` is: `[RoomEvent.ParticipantConnected, RoomEvent.ParticipantDisconnected, RoomEvent.ConnectionStateChanged]`
+
+{% /parameter %}
+
+## Returns
+
+```typescript
+RemoteParticipant[]
+```

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

@@ -0,0 +1,24 @@
+---
+{
+  "title": "useRoomContext",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/room-context.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useRoomContext
+
+Ensures that a room is provided via context. If no room is provided, an error is thrown.
+
+## Import
+
+```typescript
+import { useRoomContext } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+Room;
+```

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

@@ -0,0 +1,30 @@
+---
+{
+  "title": "useRoomInfo",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useRoomInfo.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useRoomInfo
+
+## Import
+
+```typescript
+import { useRoomInfo } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="options.room" type="Room" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  name: string;
+  metadata: string | undefined;
+}
+```

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

@@ -0,0 +1,29 @@
+---
+{
+  "title": "useSortedParticipants",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useSortedParticipants.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useSortedParticipants
+
+The `useSortedParticipants` hook returns the participants sorted by importance.
+
+## Import
+
+```typescript
+import { useSortedParticipants } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="participants" type="Array<Participant>" optional=false %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+Participant[]
+```

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

@@ -0,0 +1,30 @@
+---
+{
+  "title": "useSpeakingParticipants",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useSpeakingParticipants.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useSpeakingParticipants
+
+The `useSpeakingParticipants` hook returns only the active speakers of all participants.
+
+## Import
+
+```typescript
+import { useSpeakingParticipants } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const activeSpeakers = useSpeakingParticipants();
+```
+
+## Returns
+
+```typescript
+import('livekit-client').Participant[]
+```

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

@@ -0,0 +1,47 @@
+---
+{
+  "title": "useStartAudio",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useStartAudio.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useStartAudio
+
+{% 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 `useStatAudio` 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 { useStartAudio } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="{ room, props }.props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
+{% /parameter %}
+
+{% parameter name="{ room, props }.room" type="Room" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    mergedProps: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        className: string;
+        onClick: () => void;
+        style: {
+            display: string;
+        };
+    };
+    canPlayAudio: boolean;
+}
+```

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

@@ -0,0 +1,47 @@
+---
+{
+  "title": "useStartVideo",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useStartVideo.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useStartVideo
+
+{% 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 some browsers to start video playback in low power mode, the user must perform a user-initiated event such as clicking a button. The `useStartVideo` hook returns an object with a boolean `canPlayVideo` flag that indicates whether video playback is allowed in the current context, as well as a `startVideo` function that can be called in a button `onClick` callback to start video playback in the current context.
+
+## Import
+
+```typescript
+import { useStartVideo } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="{ room, props }.props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
+{% /parameter %}
+
+{% parameter name="{ room, props }.room" type="Room" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    mergedProps: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        className: string;
+        onClick: () => void;
+        style: {
+            display: string;
+        };
+    };
+    canPlayVideo: boolean;
+}
+```

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

@@ -0,0 +1,45 @@
+---
+{
+  "title": "useSwipe",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useSwipe.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useSwipe
+
+{% callout type="note" variation="normal" %}
+
+This feature is experimental and may change or be removed based on developer feedback and real-world usage.
+
+{% /callout %}
+
+Simple implementation to detect horizontal swipe actions. Accepts callbacks for on right and left swipes.
+
+## Import
+
+```typescript
+import { useSwipe } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+ <div
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+    >
+```
+
+## Properties
+
+{% parameter name="element" type="React.RefObject<HTMLElement>" optional=false %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+void
+```