@livekit/components-js-docs 0.0.0-20251021151641

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

@@ -0,0 +1,99 @@
+---
+{
+  "title": "useLiveKitRoom",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useLiveKitRoom.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useLiveKitRoom
+
+The `useLiveKitRoom` hook is used to implement the `LiveKitRoom` or your custom implementation of it. It returns a `Room` instance and HTML props that should be applied to the root element of the component.
+
+## Import
+
+```typescript
+import { useLiveKitRoom } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { room, htmlProps } = useLiveKitRoom();
+return <div {...htmlProps}>...</div>;
+```
+
+## Properties
+
+{% parameter name="props.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="props.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="props.audio" type="AudioCaptureOptions | boolean" optional=true %}
+Publish audio immediately after connecting to your LiveKit room.
+
+{% /parameter %}
+
+{% parameter name="props.connect" type="boolean" optional=true %}
+If set to true a connection to LiveKit room is initiated.
+
+{% /parameter %}
+
+{% parameter name="props.connectOptions" type="RoomConnectOptions" optional=true %}
+Define options how to connect to the LiveKit server.
+
+{% /parameter %}
+
+{% parameter name="props.onConnected" type="() => void" optional=true %}
+{% /parameter %}
+
+{% parameter name="props.onDisconnected" type="(reason?: DisconnectReason) => void" optional=true %}
+{% /parameter %}
+
+{% parameter name="props.onEncryptionError" type="(error: Error) => void" optional=true %}
+{% /parameter %}
+
+{% parameter name="props.onError" type="(error: Error) => void" optional=true %}
+{% /parameter %}
+
+{% parameter name="props.onMediaDeviceFailure" type="(failure?: MediaDeviceFailure) => void" optional=true %}
+{% /parameter %}
+
+{% parameter name="props.options" type="RoomOptions" optional=true %}
+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="props.room" type="Room" optional=true %}
+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="props.screen" type="ScreenShareCaptureOptions | boolean" optional=true %}
+Publish screen share immediately after connecting to your LiveKit room.
+
+{% /parameter %}
+
+{% parameter name="props.simulateParticipants" type="number | undefined" optional=true %}
+{% /parameter %}
+
+{% parameter name="props.video" type="VideoCaptureOptions | boolean" optional=true %}
+Publish video immediately after connecting to your LiveKit room.
+
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  room: Room | undefined;
+  htmlProps: HTMLAttributes<T>;
+}
+```

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

@@ -0,0 +1,46 @@
+---
+{
+  "title": "useLocalParticipant",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useLocalParticipant.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useLocalParticipant
+
+The `useLocalParticipant` hook returns the local participant and the associated state around the participant.
+
+## Import
+
+```typescript
+import { useLocalParticipant } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { localParticipant } = useLocalParticipant();
+```
+
+## 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 %}
+
+## Returns
+
+```typescript
+{
+  isMicrophoneEnabled: boolean;
+  isScreenShareEnabled: boolean;
+  isCameraEnabled: boolean;
+  microphoneTrack: TrackPublication | undefined;
+  cameraTrack: TrackPublication | undefined;
+  lastMicrophoneError: Error | undefined;
+  lastCameraError: Error | undefined;
+  localParticipant: LocalParticipant;
+}
+```

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

@@ -0,0 +1,30 @@
+---
+{
+  "title": "useLocalParticipantPermissions",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useLocalParticipantPermissions.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useLocalParticipantPermissions
+
+The `useLocalParticipantPermissions` hook returns the local participant's permissions.
+
+## Import
+
+```typescript
+import { useLocalParticipantPermissions } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { canPublish, canPublishData } = useLocalParticipantPermissions();
+```
+
+## Returns
+
+```typescript
+ParticipantPermission | undefined;
+```

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

@@ -0,0 +1,24 @@
+---
+{
+  "title": "useMaybeLayoutContext",
+  "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. -->
+
+# useMaybeLayoutContext
+
+Returns a layout context from the `LayoutContext` if it exists, otherwise `undefined`<!-- -->.
+
+## Import
+
+```typescript
+import { useMaybeLayoutContext } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+LayoutContextType | undefined;
+```

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

@@ -0,0 +1,24 @@
+---
+{
+  "title": "useMaybeParticipantContext",
+  "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. -->
+
+# useMaybeParticipantContext
+
+Returns a participant from the `ParticipantContext` if it exists, otherwise `undefined`<!-- -->.
+
+## Import
+
+```typescript
+import { useMaybeParticipantContext } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+Participant | undefined;
+```

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

@@ -0,0 +1,24 @@
+---
+{
+  "title": "useMaybeRoomContext",
+  "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. -->
+
+# useMaybeRoomContext
+
+Returns the room context if it exists, otherwise undefined.
+
+## Import
+
+```typescript
+import { useMaybeRoomContext } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+Room | undefined;
+```

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

@@ -0,0 +1,24 @@
+---
+{
+  "title": "useMaybeTrackRefContext",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/track-reference-context.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useMaybeTrackRefContext
+
+Returns a track reference from the `TrackRefContext` if it exists, otherwise `undefined`<!-- -->.
+
+## Import
+
+```typescript
+import { useMaybeTrackRefContext } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+TrackReferenceOrPlaceholder | undefined;
+```

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

@@ -0,0 +1,39 @@
+---
+{
+  "title": "useMediaDevices",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useMediaDevices.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useMediaDevices
+
+The `useMediaDevices` hook returns the list of media devices of a given kind.
+
+## Import
+
+```typescript
+import { useMediaDevices } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const videoDevices = useMediaDevices({ kind: "videoinput" });
+const audioDevices = useMediaDevices({ kind: "audioinput" });
+```
+
+## Properties
+
+{% parameter name="{ kind, onError, }" type="{
+      kind: MediaDeviceKind;
+      onError?: (e: Error) => void;
+  }" optional=false %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+MediaDeviceInfo[]
+```

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

@@ -0,0 +1,58 @@
+---
+{
+  "title": "useMediaDeviceSelect",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useMediaDeviceSelect.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useMediaDeviceSelect
+
+The `useMediaDeviceSelect` hook is used to implement the `MediaDeviceSelect` component and returns o.a. the list of devices of a given kind (audioinput or videoinput), the currently active device and a function to set the the active device.
+
+## Import
+
+```typescript
+import { useMediaDeviceSelect } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { devices, activeDeviceId, setActiveMediaDevice } = useMediaDeviceSelect({
+  kind: "audioinput"
+});
+```
+
+## Properties
+
+{% parameter name="{ kind, room, track, requestPermissions, onError, }.kind" type="MediaDeviceKind" optional=false %}
+{% /parameter %}
+
+{% parameter name="{ kind, room, track, requestPermissions, onError, }.onError" type="(e: Error) => void" optional=true %}
+this callback gets called if an error is thrown when failing to select a device and also if a user denied permissions, eventhough the `requestPermissions` option is set to `true`<!-- -->. Most commonly this will emit a MediaDeviceError
+
+{% /parameter %}
+
+{% parameter name="{ kind, room, track, requestPermissions, onError, }.requestPermissions" type="boolean" optional=true %}
+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="{ kind, room, track, requestPermissions, onError, }.room" type="Room" optional=true %}
+{% /parameter %}
+
+{% parameter name="{ kind, room, track, requestPermissions, onError, }.track" type="LocalAudioTrack | LocalVideoTrack" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    devices: MediaDeviceInfo[];
+    className: string;
+    activeDeviceId: string;
+    setActiveMediaDevice: (id: string, options?: import('../../packages/core/dist/index.d.ts').SetMediaDeviceOptions) => Promise<void>;
+}
+```

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

@@ -0,0 +1,56 @@
+---
+{
+  "title": "useMultibandTrackVolume",
+  "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. -->
+
+# useMultibandTrackVolume
+
+{% callout type="note" variation="normal" %}
+
+This feature is experimental and may change or be removed based on developer feedback and real-world usage.
+
+{% /callout %}
+
+Hook for tracking the volume of an audio track across multiple frequency bands using the Web Audio API.
+
+## Import
+
+```typescript
+import { useMultibandTrackVolume } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="options.analyserOptions" type="AnalyserOptions" optional=true %}
+{% /parameter %}
+
+{% parameter name="options.bands" type="number" optional=true %}
+{% /parameter %}
+
+{% parameter name="options.hiPass" type="number" optional=true %}
+cut off of frequency bins on the higher end Note: this is not a frequency measure, but in relation to analyserOptions.fftSize,
+
+{% /parameter %}
+
+{% parameter name="options.loPass" type="number" optional=true %}
+cut off of frequency bins on the lower end Note: this is not a frequency measure, but in relation to analyserOptions.fftSize,
+
+{% /parameter %}
+
+{% parameter name="options.updateInterval" type="number" optional=true %}
+update should run every x ms
+
+{% /parameter %}
+
+{% parameter name="trackOrTrackReference" type="LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+number[]
+```

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

@@ -0,0 +1,56 @@
+---
+{
+  "title": "usePagination",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/usePagination.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# usePagination
+
+{% callout type="note" variation="normal" %}
+
+This feature is experimental and may change or be removed based on developer feedback and real-world usage.
+
+{% /callout %}
+
+The `usePagination` hook implements simple pagination logic for use with arrays.
+
+## Import
+
+```typescript
+import { usePagination } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const tracks = useTracks();
+const pagination = usePagination(4, tracks);
+
+<TrackLoop tracks={pagination.tracks} />;
+```
+
+## Properties
+
+{% parameter name="itemPerPage" type="number" optional=false %}
+{% /parameter %}
+
+{% parameter name="trackReferences" type="TrackReferenceOrPlaceholder[]" optional=false %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    totalPageCount: number;
+    nextPage: () => void;
+    prevPage: () => void;
+    setPage: (num: number) => void;
+    firstItemIndex: number;
+    lastItemIndex: number;
+    tracks: TrackReferenceOrPlaceholder[];
+    currentPage: number;
+}
+```

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

@@ -0,0 +1,38 @@
+---
+{
+  "title": "useParticipantAttribute",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useParticipantAttributes.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useParticipantAttribute
+
+The `useParticipantAttribute` hook returns the latest value of a given attribute key of a participant. It requires a `Participant` object passed as property in the `UseParticipantAttributesOptions` or via the `ParticipantContext`<!-- -->.
+
+## Import
+
+```typescript
+import { useParticipantAttribute } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const myAttributeValue = useParticipantAttribute("targetAttributeName");
+```
+
+## Properties
+
+{% parameter name="attributeKey" type="string" optional=false %}
+{% /parameter %}
+
+{% parameter name="options.participant" type="Participant" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+string;
+```

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

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

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

@@ -0,0 +1,24 @@
+---
+{
+  "title": "useParticipantContext",
+  "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. -->
+
+# useParticipantContext
+
+Ensures that a participant is provided via context. If not inside a `ParticipantContext`<!-- -->, an error is thrown.
+
+## Import
+
+```typescript
+import { useParticipantContext } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+Participant;
+```

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

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

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

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