@livekit/components-js-docs 0.1.0 → 0.1.2

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

@@ -0,0 +1,34 @@
+---
+{
+  "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
+
+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";
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+
+## Properties
+
+{% parameter name="room" type="Room" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  canPlayAudio: boolean;
+  startAudio: () => Promise<void>;
+}
+```

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useChat` hook provides chat functionality for a LiveKit room. It returns a
 ## Import
 
 ```typescript
-import { useChat } from '@livekit/components-react';
+import { useChat } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -16,12 +23,12 @@ It is possible to pass configurations for custom message encoding and decoding.
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="options" type="{
-    messageEncoder?: MessageEncoder;
-    messageDecoder?: MessageDecoder;
-}" optional=true %}
+      messageEncoder?: MessageEncoder;
+      messageDecoder?: MessageDecoder;
+  }" optional=true %}
 {% /parameter %}
 
 ## Returns
@@ -29,7 +36,7 @@ It is possible to pass configurations for custom message encoding and decoding.
 ```typescript
 {
     send: ((message: string) => Promise<void>) | undefined;
-    chatMessages: import("@livekit/components-core").ReceivedChatMessage[];
+    chatMessages: ReceivedChatMessage[];
     isSending: boolean;
 }
 ```

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useChatToggle` hook provides state and functions for toggling the chat wind
 ## Import
 
 ```typescript
-import { useChatToggle } from '@livekit/components-react';
+import { useChatToggle } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -16,9 +23,9 @@ Depends on the `LayoutContext` to work properly.
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
-{% parameter name="{ props }" type="UseChatToggleProps" optional=false %}
+{% parameter name="props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
 {% /parameter %}
 
 ## Returns

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,16 +14,11 @@ The `useClearPinButton` hook provides props for the [ClearPinButton()](./react/c
 ## Import
 
 ```typescript
-import { useClearPinButton } from '@livekit/components-react';
+import { useClearPinButton } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
-
-{% parameter name="props" type="ClearPinButtonProps" optional=false %}
-{% /parameter %}
-
 ## Returns
 
 ```typescript

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useConnectionQualityIndicator` hook provides props for the `ConnectionQuali
 ## Import
 
 ```typescript
-import { useConnectionQualityIndicator } from '@livekit/components-react';
+import { useConnectionQualityIndicator } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -20,7 +27,7 @@ const { quality } = useConnectionQualityIndicator({ participant });
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="options" type="ConnectionQualityIndicatorOptions" optional=true %}
 {% /parameter %}
@@ -29,7 +36,7 @@ const { quality } = useConnectionQualityIndicator({ participant });
 
 ```typescript
 {
-  className: 'lk-connection-quality';
+  className: "lk-connection-quality";
   quality: ConnectionQuality;
 }
 ```

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useConnectionState` hook allows you to simply implement your own `Connectio
 ## Import
 
 ```typescript
-import { useConnectionState } from '@livekit/components-react';
+import { useConnectionState } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -18,7 +25,7 @@ const connectionState = useConnectionState(room);
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="room" type="Room" optional=true %}
 {% /parameter %}
@@ -26,5 +33,5 @@ const connectionState = useConnectionState(room);
 ## Returns
 
 ```typescript
-import('livekit-client').ConnectionState;
+import("livekit-client").ConnectionState;
 ```

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -5,7 +12,7 @@
 ## Import
 
 ```typescript
-import { useCreateLayoutContext } from '@livekit/components-react';
+import { useCreateLayoutContext } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useDataChannel` hook returns the ability to send and receive messages. By o
 ## Import
 
 ```typescript
-import { useDataChannel } from '@livekit/components-react';
+import { useDataChannel } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -18,12 +25,12 @@ There is only one data channel. Passing a `topic` does not open a new data chann
 
 ```tsx
 // Send messages to all participants via the 'chat' topic.
-const { message, send } = useDataChannel('chat');
+const { message, send } = useDataChannel("chat");
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="topic" type="T" optional=false %}
 {% /parameter %}

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useDataChannel` hook returns the ability to send and receive messages.
 ## Import
 
 ```typescript
-import { useDataChannel } from '@livekit/components-react';
+import { useDataChannel } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -23,7 +30,7 @@ const { message, send } = useDataChannel(callback);
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="onMessage" type="(msg: ReceivedDataMessage) => void" optional=true %}
 {% /parameter %}

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useDisconnectButton` hook is used to implement the `DisconnectButton` or yo
 ## Import
 
 ```typescript
-import { useDisconnectButton } from '@livekit/components-react';
+import { useDisconnectButton } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -19,9 +26,9 @@ return <button {...buttonProps}>Disconnect</button>;
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
-{% parameter name="props" type="DisconnectButtonProps" optional=false %}
+{% parameter name="stopTracks" type="boolean" optional=true %}
 {% /parameter %}
 
 ## Returns

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -5,12 +12,12 @@
 ## Import
 
 ```typescript
-import { useEnsureCreateLayoutContext } from '@livekit/components-react';
+import { useEnsureCreateLayoutContext } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="layoutContext" type="LayoutContextType" optional=true %}
 {% /parameter %}

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,12 +14,12 @@ Ensures that a layout context is provided, either via context or explicitly as a
 ## Import
 
 ```typescript
-import { useEnsureLayoutContext } from '@livekit/components-react';
+import { useEnsureLayoutContext } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="layoutContext" type="LayoutContextType" optional=true %}
 {% /parameter %}

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,12 +14,12 @@ Ensures that a participant is provided, either via context or explicitly as a pa
 ## Import
 
 ```typescript
-import { useEnsureParticipant } from '@livekit/components-react';
+import { useEnsureParticipant } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="participant" type="Participant" optional=true %}
 {% /parameter %}

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,12 +14,12 @@ Ensures that a room is provided, either via context or explicitly as a parameter
 ## Import
 
 ```typescript
-import { useEnsureRoom } from '@livekit/components-react';
+import { useEnsureRoom } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="room" type="Room" optional=true %}
 {% /parameter %}

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,12 +14,12 @@ Ensures that a track reference is provided, either via context or explicitly as
 ## Import
 
 ```typescript
-import { useEnsureTrackRef } from '@livekit/components-react';
+import { useEnsureTrackRef } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
 {% /parameter %}

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

@@ -1,22 +1,33 @@
+---
+{
+  "title": "useEnsureTrackReference",
+  "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. -->
 
 # useEnsureTrackReference
 
-> Warning: This API is now obsolete.
->
-> `useEnsureTrackReference` has been to `useEnsureTrackRef`<!-- -->, use this as a drop in replacement.
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated:
+
+`useEnsureTrackReference` has been renamed to `useEnsureTrackRef`<!-- -->, use this as a drop in replacement.
+
+{% /callout %}
 
 Ensures that a track reference is provided, either via context or explicitly as a parameter. If not inside a `TrackContext` and no track reference is provided, an error is thrown.
 
 ## Import
 
 ```typescript
-import { useEnsureTrackReference } from '@livekit/components-react';
+import { useEnsureTrackReference } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="track" type="TrackReferenceOrPlaceholder" optional=true %}
 {% /parameter %}

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

@@ -0,0 +1,35 @@
+---
+{
+  "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
+
+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.
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+
+## Properties
+
+{% parameter name="trackReference" type="TrackReferenceOrPlaceholder" optional=false %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+"user" | "environment" | "left" | "right" | "undefined";
+```

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,21 +14,38 @@ The `useFocusToggle` hook is used to implement the `FocusToggle` or your custom
 ## Import
 
 ```typescript
-import { useFocusToggle } from '@livekit/components-react';
+import { useFocusToggle } from "@livekit/components-react";
 ```
 
 ## Usage
 
 ```tsx
 const { mergedProps, inFocus } = useFocusToggle({ trackRef, props: yourButtonProps });
-return <button {...mergedProps}>{inFocus ? 'Unfocus' : 'Focus'}</button>;
+return <button {...mergedProps}>{inFocus ? "Unfocus" : "Focus"}</button>;
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
+
+{% parameter name="props" type="React.ButtonHTMLAttributes<HTMLButtonElement>" optional=false %}
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+{% /parameter %}
+
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
+{% /parameter %}
+
+{% parameter name="trackSource" type="Track.Source" optional=true deprecated=true %}
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
 
-{% parameter name="{ trackRef, trackSource, participant, props }" type="UseFocusToggleProps" optional=false %}
+{% /callout %}
 {% /parameter %}
 
 ## Returns

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useGridLayout` hook tries to select the best layout to fit all tiles. If th
 ## Import
 
 ```typescript
-import { useGridLayout } from '@livekit/components-react';
+import { useGridLayout } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -18,7 +25,7 @@ const { layout } = useGridLayout(gridElement, trackCount);
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="gridElement" type="React.RefObject<HTMLDivElement>" optional=false %}
 {% /parameter %}

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

@@ -1,3 +1,10 @@
+---
+{
+  "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
@@ -7,7 +14,7 @@ The `useIsMuted` hook is used to implement the `TrackMutedIndicator` or your cus
 ## Import
 
 ```typescript
-import { useIsMuted } from '@livekit/components-react';
+import { useIsMuted } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -18,7 +25,7 @@ const isMuted = useIsMuted(track);
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=false %}
 {% /parameter %}