@livekit/components-js-docs 0.1.0 → 0.1.1

package/generated-docs/react/focuslayoutprops.trackref.md

@@ -1,6 +1,10 @@
+---
+{ "title": "FocusLayoutProps.trackRef property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusLayoutProps.trackRef property
+# FocusLayoutProps.trackRef property
 
 The track to display in the focus layout.
 

package/generated-docs/react/focustoggleprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "FocusToggleProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/FocusToggle.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusToggleProps interface
+# FocusToggleProps interface
 
 **Signature:**
 

package/generated-docs/react/focustoggleprops.participant.md

@@ -1,10 +1,18 @@
+---
+{ "title": "FocusToggleProps.participant property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusToggleProps.participant property
+# FocusToggleProps.participant property
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated:
+
+This parameter will be removed in a future version use `trackRef` instead.
 
-> Warning: This API is now obsolete.
->
-> This parameter will be removed in a future version use `trackRef` instead.
+{% /callout %}
 
 **Signature:**
 

package/generated-docs/react/focustoggleprops.trackref.md

@@ -1,6 +1,10 @@
+---
+{ "title": "FocusToggleProps.trackRef property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusToggleProps.trackRef property
+# FocusToggleProps.trackRef property
 
 **Signature:**
 

package/generated-docs/react/focustoggleprops.tracksource.md

@@ -1,10 +1,18 @@
+---
+{ "title": "FocusToggleProps.trackSource property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## FocusToggleProps.trackSource property
+# FocusToggleProps.trackSource property
+
+{% callout type="caution" variation="normal" %}
+
+This API is deprecated:
+
+This parameter will be removed in a future version use `trackRef` instead.
 
-> Warning: This API is now obsolete.
->
-> This parameter will be removed in a future version use `trackRef` instead.
+{% /callout %}
 
 **Signature:**
 

package/generated-docs/react/formatchatmessagelinks.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "formatChatMessageLinks",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ChatEntry.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # formatChatMessageLinks

package/generated-docs/react/gridlayoutprops.children.md

@@ -1,6 +1,10 @@
+---
+{ "title": "GridLayoutProps.children property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## GridLayoutProps.children property
+# GridLayoutProps.children property
 
 **Signature:**
 

package/generated-docs/react/gridlayoutprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "GridLayoutProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/GridLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## GridLayoutProps interface
+# GridLayoutProps interface
 
 **Signature:**
 

package/generated-docs/react/gridlayoutprops.tracks.md

@@ -1,6 +1,10 @@
+---
+{ "title": "GridLayoutProps.tracks property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## GridLayoutProps.tracks property
+# GridLayoutProps.tracks property
 
 **Signature:**
 

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

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/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