@livekit/components-js-docs 0.0.0-20251021151641

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

@@ -0,0 +1,35 @@
+---
+{
+  "title": "useConnectionState",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useConnectionStatus.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useConnectionState
+
+The `useConnectionState` hook allows you to simply implement your own `ConnectionState` component.
+
+## Import
+
+```typescript
+import { useConnectionState } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const connectionState = useConnectionState(room);
+```
+
+## Properties
+
+{% parameter name="room" type="Room" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+import("livekit-client").ConnectionState;
+```

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

@@ -0,0 +1,22 @@
+---
+{
+  "title": "useCreateLayoutContext",
+  "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. -->
+
+# useCreateLayoutContext
+
+## Import
+
+```typescript
+import { useCreateLayoutContext } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+LayoutContextType;
+```

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

@@ -0,0 +1,45 @@
+---
+{
+  "title": "useDataChannel",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useDataChannel.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useDataChannel
+
+The `useDataChannel` hook returns the ability to send and receive messages. By optionally passing a `topic`<!-- -->, you can narrow down which messages are returned in the messages array.
+
+## Import
+
+```typescript
+import { useDataChannel } from "@livekit/components-react";
+```
+
+## Remarks
+
+There is only one data channel. Passing a `topic` does not open a new data channel. It is only used to filter out messages with no or a different `topic`<!-- -->.
+
+## Usage
+
+```tsx
+// Send messages to all participants via the 'chat' topic.
+const { message: latestMessage, send } = useDataChannel("chat", (msg) =>
+  console.log("message received", msg)
+);
+```
+
+## Properties
+
+{% parameter name="topic" type="T" optional=false %}
+{% /parameter %}
+
+{% parameter name="onMessage" type="(msg: ReceivedDataMessage<T>) => void" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+UseDataChannelReturnType<T>;
+```

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

@@ -0,0 +1,42 @@
+---
+{
+  "title": "useDisconnectButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useDisconnectButton.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useDisconnectButton
+
+The `useDisconnectButton` hook is used to implement the `DisconnectButton` or your custom implementation of it. It adds onClick handler to the button to disconnect from the room.
+
+## Import
+
+```typescript
+import { useDisconnectButton } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { buttonProps } = useDisconnectButton(buttonProps);
+return <button {...buttonProps}>Disconnect</button>;
+```
+
+## Properties
+
+{% parameter name="props.stopTracks" type="boolean" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    buttonProps: DisconnectButtonProps & {
+        className: string;
+        onClick: () => void;
+        disabled: boolean;
+    };
+}
+```

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

@@ -0,0 +1,27 @@
+---
+{
+  "title": "useEnsureCreateLayoutContext",
+  "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. -->
+
+# useEnsureCreateLayoutContext
+
+## Import
+
+```typescript
+import { useEnsureCreateLayoutContext } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="layoutContext" type="LayoutContextType" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+LayoutContextType;
+```

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

@@ -0,0 +1,29 @@
+---
+{
+  "title": "useEnsureLayoutContext",
+  "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. -->
+
+# useEnsureLayoutContext
+
+Ensures that a layout context is provided, either via context or explicitly as a parameter. If not inside a `LayoutContext` and no layout context is provided, an error is thrown.
+
+## Import
+
+```typescript
+import { useEnsureLayoutContext } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="layoutContext" type="LayoutContextType" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+LayoutContextType;
+```

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

@@ -0,0 +1,29 @@
+---
+{
+  "title": "useEnsureParticipant",
+  "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. -->
+
+# useEnsureParticipant
+
+Ensures that a participant is provided, either via context or explicitly as a parameter. If not inside a `ParticipantContext` and no participant is provided, an error is thrown.
+
+## Import
+
+```typescript
+import { useEnsureParticipant } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="participant" type="Participant" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+Participant;
+```

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

@@ -0,0 +1,29 @@
+---
+{
+  "title": "useEnsureRoom",
+  "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. -->
+
+# useEnsureRoom
+
+Ensures that a room is provided, either via context or explicitly as a parameter. If no room is provided, an error is thrown.
+
+## Import
+
+```typescript
+import { useEnsureRoom } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="room" type="Room" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+Room;
+```

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

@@ -0,0 +1,29 @@
+---
+{
+  "title": "useEnsureTrackRef",
+  "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. -->
+
+# useEnsureTrackRef
+
+Ensures that a track reference is provided, either via context or explicitly as a parameter. If not inside a `TrackRefContext` and no track reference is provided, an error is thrown.
+
+## Import
+
+```typescript
+import { useEnsureTrackRef } from "@livekit/components-react";
+```
+
+## Properties
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+TrackReferenceOrPlaceholder;
+```

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

@@ -0,0 +1,39 @@
+---
+{
+  "title": "useFacingMode",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useFacingMode.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# 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
+
+```typescript
+import { useFacingMode } from "@livekit/components-react";
+```
+
+## Remarks
+
+Works only on local video tracks.
+
+## Properties
+
+{% parameter name="trackReference" type="TrackReferenceOrPlaceholder" optional=false %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+"user" | "environment" | "left" | "right" | "undefined";
+```

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

@@ -0,0 +1,45 @@
+---
+{
+  "title": "useFocusToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useFocusToggle.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useFocusToggle
+
+The `useFocusToggle` hook is used to implement the `FocusToggle` or your custom implementation of it. The `TrackReferenceOrPlaceholder` is used to register a onClick handler and to identify the track to focus on.
+
+## Import
+
+```typescript
+import { useFocusToggle } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { mergedProps, inFocus } = useFocusToggle({ trackRef, props: yourButtonProps });
+return <button {...mergedProps}>{inFocus ? "Unfocus" : "Focus"}</button>;
+```
+
+## Properties
+
+{% parameter name="{ trackRef, props }.props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
+{% /parameter %}
+
+{% parameter name="{ trackRef, props }.trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+    mergedProps: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        className: string;
+        onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    };
+    inFocus: boolean;
+}
+```

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

@@ -0,0 +1,47 @@
+---
+{
+  "title": "useGridLayout",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useGridLayout.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useGridLayout
+
+The `useGridLayout` hook tries to select the best layout to fit all tiles. If the available screen space is not enough, it will reduce the number of maximum visible tiles and select a layout that still works visually within the given limitations. As the order of tiles changes over time, the hook tries to keep visual updates to a minimum while trying to display important tiles such as speaking participants or screen shares.
+
+## Import
+
+```typescript
+import { useGridLayout } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const { layout } = useGridLayout(gridElement, trackCount);
+```
+
+## Properties
+
+{% parameter name="gridElement" type="React.RefObject<HTMLDivElement>" optional=false %}
+{% /parameter %}
+
+{% parameter name="trackCount" type="number" optional=false %}
+{% /parameter %}
+
+{% parameter name="options" type="{
+      gridLayouts?: GridLayoutDefinition[];
+  }" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  layout: GridLayoutInfo;
+  containerWidth: number;
+  containerHeight: number;
+}
+```

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

@@ -0,0 +1,36 @@
+---
+{
+  "title": "useIsEncrypted",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useIsEncrypted.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# 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";
+```
+
+## Properties
+
+{% parameter name="options.room" type="Room" optional=true %}
+{% /parameter %}
+
+{% parameter name="participant" type="Participant" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+boolean;
+```

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

@@ -0,0 +1,45 @@
+---
+{
+  "title": "useIsMuted",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useIsMuted.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useIsMuted
+
+The `useIsMuted` hook is used to implement the `TrackMutedIndicator` or your custom implementation of it. It returns a `boolean` that indicates if the track is muted or not.
+
+## Import
+
+```typescript
+import { useIsMuted } from "@livekit/components-react";
+```
+
+## Usage
+
+### With a track reference
+
+```tsx
+const isMuted = useIsMuted(track);
+```
+
+### With a track source / participant
+
+```tsx
+const isMuted = useIsMuted("camera", { participant });
+```
+
+## Properties
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=false %}
+{% /parameter %}
+
+## Returns
+
+boolean indicating if the track is muted
+
+```typescript
+boolean;
+```

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

@@ -0,0 +1,35 @@
+---
+{
+  "title": "useIsRecording",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useIsRecording.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useIsRecording
+
+The `useIsRecording` hook returns a `boolean` that indicates if the room is currently being recorded.
+
+## Import
+
+```typescript
+import { useIsRecording } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const isRecording = useIsRecording();
+```
+
+## Properties
+
+{% parameter name="room" type="Room" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+boolean;
+```

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

@@ -0,0 +1,35 @@
+---
+{
+  "title": "useIsSpeaking",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useIsSpeaking.ts"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useIsSpeaking
+
+The `useIsSpeaking` hook returns a `boolean` that indicates if the participant is speaking or not.
+
+## Import
+
+```typescript
+import { useIsSpeaking } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+const isSpeaking = useIsSpeaking(participant);
+```
+
+## Properties
+
+{% parameter name="participant" type="Participant" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+boolean;
+```

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

@@ -0,0 +1,24 @@
+---
+{
+  "title": "useLayoutContext",
+  "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. -->
+
+# useLayoutContext
+
+Ensures that a layout context is provided via context. If no layout context is provided, an error is thrown.
+
+## Import
+
+```typescript
+import { useLayoutContext } from "@livekit/components-react";
+```
+
+## Returns
+
+```typescript
+LayoutContextType;
+```