@livekit/components-js-docs 0.1.48 → 0.1.49

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

@@ -9,17 +9,27 @@
 
 # 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";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
-{% parameter name="options" type="AudioWaveformOptions" optional=true %}
+{% 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 %}

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

@@ -17,13 +17,6 @@ The `useChat` hook provides chat functionality for a LiveKit room. It returns a
 import { useChat } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
-## Properties
-
-{% parameter name="options" type="ChatOptions" optional=true %}
-{% /parameter %}
-
 ## Returns
 
 ```typescript

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

@@ -21,11 +21,9 @@ import { useChatToggle } from "@livekit/components-react";
 
 Depends on the `LayoutContext` to work properly.
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
-{% parameter name="props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
+{% parameter name="{ props }.props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
 {% /parameter %}
 
 ## Returns

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

@@ -17,8 +17,6 @@ The `useClearPinButton` hook provides props for the [ClearPinButton()](./react/c
 import { useClearPinButton } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Returns
 
 ```typescript

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

@@ -25,11 +25,9 @@ const { quality } = useConnectionQualityIndicator();
 const { quality } = useConnectionQualityIndicator({ participant });
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
-{% parameter name="options" type="ConnectionQualityIndicatorOptions" optional=true %}
+{% parameter name="options.participant" type="Participant" optional=true %}
 {% /parameter %}
 
 ## Returns

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

@@ -23,8 +23,6 @@ import { useConnectionState } from "@livekit/components-react";
 const connectionState = useConnectionState(room);
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
 {% parameter name="room" type="Room" optional=true %}

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

@@ -15,8 +15,6 @@
 import { useCreateLayoutContext } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Returns
 
 ```typescript

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

@@ -30,8 +30,6 @@ const { message: latestMessage, send } = useDataChannel("chat", (msg) =>
 );
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
 {% parameter name="topic" type="T" optional=false %}

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

@@ -30,8 +30,6 @@ const { message: latestMessage, send } = useDataChannel("chat", (msg) =>
 );
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
 {% parameter name="onMessage" type="(msg: ReceivedDataMessage) => void" optional=true %}

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

@@ -24,11 +24,9 @@ const { buttonProps } = useDisconnectButton(buttonProps);
 return <button {...buttonProps}>Disconnect</button>;
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
-{% parameter name="stopTracks" type="boolean" optional=true %}
+{% parameter name="props.stopTracks" type="boolean" optional=true %}
 {% /parameter %}
 
 ## Returns

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

@@ -15,8 +15,6 @@
 import { useEnsureCreateLayoutContext } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
 {% parameter name="layoutContext" type="LayoutContextType" optional=true %}

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

@@ -17,8 +17,6 @@ Ensures that a layout context is provided, either via context or explicitly as a
 import { useEnsureLayoutContext } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
 {% parameter name="layoutContext" type="LayoutContextType" optional=true %}

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

@@ -17,8 +17,6 @@ Ensures that a participant is provided, either via context or explicitly as a pa
 import { useEnsureParticipant } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
 {% parameter name="participant" type="Participant" optional=true %}

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

@@ -17,8 +17,6 @@ Ensures that a room is provided, either via context or explicitly as a parameter
 import { useEnsureRoom } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
 {% parameter name="room" type="Room" optional=true %}

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

@@ -17,8 +17,6 @@ Ensures that a track reference is provided, either via context or explicitly as
 import { useEnsureTrackRef } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
 {% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}

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

@@ -9,6 +9,12 @@
 
 # useFacingMode
 
+{% callout type="note" variation="normal" %}
+
+This feature is experimental and may change or be removed based on developer feedback and real-world usage.
+
+{% /callout %}
+
 Try to determine the `facingMode` of a local participant video track.
 
 ## Import
@@ -21,8 +27,6 @@ import { useFacingMode } from "@livekit/components-react";
 
 Works only on local video tracks.
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
 {% parameter name="trackReference" type="TrackReferenceOrPlaceholder" optional=false %}

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

@@ -24,14 +24,12 @@ const { mergedProps, inFocus } = useFocusToggle({ trackRef, props: yourButtonPro
 return <button {...mergedProps}>{inFocus ? "Unfocus" : "Focus"}</button>;
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
-{% parameter name="props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
+{% parameter name="{ trackRef, props }.props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+{% parameter name="{ trackRef, props }.trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
 {% /parameter %}
 
 ## Returns

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

@@ -23,8 +23,6 @@ import { useGridLayout } from "@livekit/components-react";
 const { layout } = useGridLayout(gridElement, trackCount);
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
 {% parameter name="gridElement" type="React.RefObject<HTMLDivElement>" optional=false %}

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

@@ -9,17 +9,21 @@
 
 # useIsEncrypted
 
+{% 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 { useIsEncrypted } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
-{% parameter name="options" type="UseIsEncryptedOptions" optional=true %}
+{% parameter name="options.room" type="Room" optional=true %}
 {% /parameter %}
 
 {% parameter name="participant" type="Participant" optional=true %}

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

@@ -19,11 +19,17 @@ import { useIsMuted } from "@livekit/components-react";
 
 ## Usage
 
+### With a track reference
+
 ```tsx
 const isMuted = useIsMuted(track);
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
+### With a track source / participant
+
+```tsx
+const isMuted = useIsMuted("camera", { participant });
+```
 
 ## Properties
 
@@ -32,6 +38,8 @@ const isMuted = useIsMuted(track);
 
 ## Returns
 
+boolean indicating if the track is muted
+
 ```typescript
 boolean;
 ```

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

@@ -23,8 +23,6 @@ import { useIsRecording } from "@livekit/components-react";
 const isRecording = useIsRecording();
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
 {% parameter name="room" type="Room" optional=true %}

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

@@ -23,8 +23,6 @@ import { useIsSpeaking } from "@livekit/components-react";
 const isSpeaking = useIsSpeaking(participant);
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
 {% parameter name="participant" type="Participant" optional=true %}

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

@@ -0,0 +1,64 @@
+---
+{
+  "title": "useKrispNoiseFilter",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/cloud/krisp/useKrispNoiseFilter.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useKrispNoiseFilter
+
+{% callout type="note" variation="normal" %}
+
+This feature is under active development and may change based on developer feedback and real-world usage.
+
+{% /callout %}
+
+Enable the Krisp enhanced noise cancellation feature for local audio tracks.
+
+Defaults to the localParticipant's microphone track publication, but you can override this behavior by passing in a different track reference.
+
+## Import
+
+```typescript
+import { useKrispNoiseFilter } from "@livekit/components-react/krisp";
+```
+
+## Remarks
+
+This filter requires that you install the `@livekit/krisp-noise-filter` package and is supported only on [LiveKit Cloud](https://cloud.livekit.io)<!-- -->.
+
+## Usage
+
+```tsx
+const krisp = useKrispNoiseFilter();
+return (
+  <input
+    type="checkbox"
+    onChange={(ev) => krisp.setNoiseFilterEnabled(ev.target.checked)}
+    checked={krisp.isNoiseFilterEnabled}
+    disabled={krisp.isNoiseFilterPending}
+  />
+);
+```
+
+## Properties
+
+{% parameter name="options.trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+The track reference to use for the noise filter (defaults: local microphone track)
+
+{% /parameter %}
+
+## Returns
+
+Use `setIsNoiseFilterEnabled` to enable/disable the noise filter.
+
+```typescript
+{
+  setNoiseFilterEnabled: (enable: boolean) => Promise<void>;
+  isNoiseFilterEnabled: boolean;
+  isNoiseFilterPending: boolean;
+  processor: KrispNoiseFilterProcessor | undefined;
+}
+```

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

@@ -17,8 +17,6 @@ Ensures that a layout context is provided via context. If no layout context is p
 import { useLayoutContext } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Returns
 
 ```typescript

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

@@ -24,69 +24,67 @@ const { room, htmlProps } = useLiveKitRoom();
 return <div {...htmlProps}>...</div>;
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
-{% parameter name="serverUrl" type="string | undefined" optional=false %}
+{% 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="token" type="string | undefined" optional=false %}
+{% 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="audio" type="AudioCaptureOptions | boolean" optional=true %}
+{% parameter name="props.audio" type="AudioCaptureOptions | boolean" optional=true %}
 Publish audio immediately after connecting to your LiveKit room.
 
 {% /parameter %}
 
-{% parameter name="connect" type="boolean" optional=true %}
+{% parameter name="props.connect" type="boolean" optional=true %}
 If set to true a connection to LiveKit room is initiated.
 
 {% /parameter %}
 
-{% parameter name="connectOptions" type="RoomConnectOptions" optional=true %}
+{% parameter name="props.connectOptions" type="RoomConnectOptions" optional=true %}
 Define options how to connect to the LiveKit server.
 
 {% /parameter %}
 
-{% parameter name="onConnected" type="() => void" optional=true %}
+{% parameter name="props.onConnected" type="() => void" optional=true %}
 {% /parameter %}
 
-{% parameter name="onDisconnected" type="(reason?: DisconnectReason) => void" optional=true %}
+{% parameter name="props.onDisconnected" type="(reason?: DisconnectReason) => void" optional=true %}
 {% /parameter %}
 
-{% parameter name="onEncryptionError" type="(error: Error) => void" optional=true %}
+{% parameter name="props.onEncryptionError" type="(error: Error) => void" optional=true %}
 {% /parameter %}
 
-{% parameter name="onError" type="(error: Error) => void" optional=true %}
+{% parameter name="props.onError" type="(error: Error) => void" optional=true %}
 {% /parameter %}
 
-{% parameter name="onMediaDeviceFailure" type="(failure?: MediaDeviceFailure) => void" optional=true %}
+{% parameter name="props.onMediaDeviceFailure" type="(failure?: MediaDeviceFailure) => void" optional=true %}
 {% /parameter %}
 
-{% parameter name="options" type="RoomOptions" optional=true %}
+{% 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="room" type="Room" optional=true %}
+{% 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="screen" type="ScreenShareCaptureOptions | boolean" optional=true %}
+{% parameter name="props.screen" type="ScreenShareCaptureOptions | boolean" optional=true %}
 Publish screen share immediately after connecting to your LiveKit room.
 
 {% /parameter %}
 
-{% parameter name="simulateParticipants" type="number | undefined" optional=true %}
+{% parameter name="props.simulateParticipants" type="number | undefined" optional=true %}
 {% /parameter %}
 
-{% parameter name="video" type="VideoCaptureOptions | boolean" optional=true %}
+{% parameter name="props.video" type="VideoCaptureOptions | boolean" optional=true %}
 Publish video immediately after connecting to your LiveKit room.
 
 {% /parameter %}

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

@@ -23,11 +23,11 @@ import { useLocalParticipant } from "@livekit/components-react";
 const { localParticipant } = useLocalParticipant();
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
-{% parameter name="options" type="UseLocalParticipantOptions" optional=true %}
+{% 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

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

@@ -23,8 +23,6 @@ import { useLocalParticipantPermissions } from "@livekit/components-react";
 const { canPublish, canPublishData } = useLocalParticipantPermissions();
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Returns
 
 ```typescript

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

@@ -17,8 +17,6 @@ Returns a layout context from the `LayoutContext` if it exists, otherwise `undef
 import { useMaybeLayoutContext } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Returns
 
 ```typescript

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

@@ -17,8 +17,6 @@ Returns a participant from the `ParticipantContext` if it exists, otherwise `und
 import { useMaybeParticipantContext } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Returns
 
 ```typescript

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

@@ -17,8 +17,6 @@ Returns the room context if it exists, otherwise undefined.
 import { useMaybeRoomContext } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Returns
 
 ```typescript

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

@@ -17,8 +17,6 @@ Returns a track reference from the `TrackRefContext` if it exists, otherwise `un
 import { useMaybeTrackRefContext } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Returns
 
 ```typescript

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

@@ -24,8 +24,6 @@ const videoDevices = useMediaDevices({ kind: "videoinput" });
 const audioDevices = useMediaDevices({ kind: "audioinput" });
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
 {% parameter name="{ kind, onError, }" type="{

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

@@ -25,27 +25,25 @@ const { devices, activeDeviceId, setActiveMediaDevice } = useMediaDeviceSelect({
 });
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
-{% parameter name="kind" type="MediaDeviceKind" optional=false %}
+{% parameter name="{ kind, room, track, requestPermissions, onError, }.kind" type="MediaDeviceKind" optional=false %}
 {% /parameter %}
 
-{% parameter name="onError" type="(e: Error) => void" optional=true %}
+{% 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="requestPermissions" type="boolean" optional=true %}
+{% 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="room" type="Room" optional=true %}
+{% parameter name="{ kind, room, track, requestPermissions, onError, }.room" type="Room" optional=true %}
 {% /parameter %}
 
-{% parameter name="track" type="LocalAudioTrack | LocalVideoTrack" optional=true %}
+{% parameter name="{ kind, room, track, requestPermissions, onError, }.track" type="LocalAudioTrack | LocalVideoTrack" optional=true %}
 {% /parameter %}
 
 ## Returns

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

@@ -9,6 +9,12 @@
 
 # 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
@@ -17,11 +23,27 @@ Hook for tracking the volume of an audio track across multiple frequency bands u
 import { useMultibandTrackVolume } from "@livekit/components-react";
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
-
 ## Properties
 
-{% parameter name="options" type="MultiBandTrackVolumeOptions" optional=true %}
+{% 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 %}

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

@@ -9,6 +9,12 @@
 
 # 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
@@ -26,8 +32,6 @@ const pagination = usePagination(4, tracks);
 <TrackLoop tracks={pagination.tracks} />;
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
 ## Properties
 
 {% parameter name="itemPerPage" type="number" optional=false %}