@livekit/components-js-docs 0.1.0 → 0.1.1

package/generated-docs/react/component/audiotrack.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "AudioTrack",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/AudioTrack.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # AudioTrack
@@ -7,7 +14,7 @@ The AudioTrack component is responsible for rendering participant audio tracks.
 ## Import
 
 ```typescript
-import { AudioTrack } from '@livekit/components-react';
+import { AudioTrack } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -22,37 +29,53 @@ import { AudioTrack } from '@livekit/components-react';
 
 ## Properties
 
-{% parameter name="name" type="string" optional=true %}
+{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
 _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
-_(Optional)_
+{% parameter name="trackRef" type="TrackReference" optional=true %}
+_(Optional)_ The track reference of the track from which the audio is to be rendered.
 
 {% /parameter %}
 
-{% parameter name="participant" type="Participant" optional=true %}
-_(Optional)_
+{% parameter name="volume" type="number" optional=true %}
+_(Optional)_ by the default the range is between 0 and 1
 
 {% /parameter %}
 
-{% parameter name="publication" type="TrackPublication" optional=true %}
+{% parameter name="name" type="string" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="source" type="Track.Source" optional=true %}
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReference" optional=true %}
-_(Optional)_ The track reference of the track from which the audio is to be rendered.
+{% parameter name="publication" type="TrackPublication" optional=true deprecated=true %}
+_(Optional)_
+
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
 
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="volume" type="number" optional=true %}
-_(Optional)_ by the default the range is between 0 and 1
+{% parameter name="source" type="Track.Source" optional=true deprecated=true %}
+_(Optional)_
+
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
 
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/audiovisualizer.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "AudioVisualizer",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/AudioVisualizer.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # AudioVisualizer
@@ -7,7 +14,7 @@ The AudioVisualizer component is used to visualize the audio volume of a given a
 ## Import
 
 ```typescript
-import { AudioVisualizer } from '@livekit/components-react';
+import { AudioVisualizer } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -24,12 +31,16 @@ Requires a `TrackReferenceOrPlaceholder` to be provided either as a property or
 
 ## Properties
 
-{% parameter name="participant" type="Participant" optional=true %}
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
 _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+this property will be removed in a future version, use `trackRef` instead
+
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/carousellayout.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "CarouselLayout",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/CarouselLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # CarouselLayout
@@ -7,7 +14,7 @@ The `CarouselLayout` component displays a list of tracks in a scroll container.
 ## Import
 
 ```typescript
-import { CarouselLayout } from '@livekit/components-react';
+import { CarouselLayout } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/chat.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "Chat",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/Chat.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # Chat
@@ -7,7 +14,7 @@ The Chat component adds a basis chat functionality to the LiveKit room. The mess
 ## Import
 
 ```typescript
-import { Chat } from '@livekit/components-react';
+import { Chat } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/chatentry.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ChatEntry",
+  "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. -->
 
 # ChatEntry
@@ -7,7 +14,7 @@ The `ChatEntry` component holds and displays one chat message.
 ## Import
 
 ```typescript
-import { ChatEntry } from '@livekit/components-react';
+import { ChatEntry } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/chattoggle.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ChatToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/ChatToggle.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ChatToggle
@@ -7,7 +14,7 @@ The `ChatToggle` component is a button that toggles the visibility of the `Chat`
 ## Import
 
 ```typescript
-import { ChatToggle } from '@livekit/components-react';
+import { ChatToggle } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/clearpinbutton.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ClearPinButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/ClearPinButton.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ClearPinButton
@@ -7,7 +14,7 @@ The `ClearPinButton` is a basic html button with the added ability to signal the
 ## Import
 
 ```typescript
-import { ClearPinButton } from '@livekit/components-react';
+import { ClearPinButton } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/connectionqualityindicator.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ConnectionQualityIndicator",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ConnectionQualityIndicator.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ConnectionQualityIndicator
@@ -7,7 +14,7 @@ The `ConnectionQualityIndicator` shows the individual connection quality of a pa
 ## Import
 
 ```typescript
-import { ConnectionQualityIndicator } from '@livekit/components-react';
+import { ConnectionQualityIndicator } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/connectionstate.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ConnectionState",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionState.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ConnectionState
@@ -7,7 +14,7 @@ The `ConnectionState` component displays the connection status of the room as st
 ## Import
 
 ```typescript
-import { ConnectionState } from '@livekit/components-react';
+import { ConnectionState } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/connectionstatetoast.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ConnectionStateToast",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionStateToast.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ConnectionStateToast
@@ -7,7 +14,7 @@ The `ConnectionStateToast` component displays a toast notification indicating th
 ## Import
 
 ```typescript
-import { ConnectionStateToast } from '@livekit/components-react';
+import { ConnectionStateToast } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}

package/generated-docs/react/component/controlbar.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ControlBar",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/ControlBar.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ControlBar
@@ -7,7 +14,7 @@ The `ControlBar` prefab gives the user the basic user interface to control their
 ## Import
 
 ```typescript
-import { ControlBar } from '@livekit/components-react';
+import { ControlBar } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/disconnectbutton.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "DisconnectButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/DisconnectButton.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # DisconnectButton
@@ -7,7 +14,7 @@ The `DisconnectButton` is a basic html button with the added ability to disconne
 ## Import
 
 ```typescript
-import { DisconnectButton } from '@livekit/components-react';
+import { DisconnectButton } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/focuslayout.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "FocusLayout",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/FocusLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # FocusLayout
@@ -7,7 +14,7 @@ The `FocusLayout` component is just a light wrapper around the `ParticipantTile`
 ## Import
 
 ```typescript
-import { FocusLayout } from '@livekit/components-react';
+import { FocusLayout } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
@@ -19,12 +26,16 @@ _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="track" type="TrackReferenceOrPlaceholder" optional=true %}
-_(Optional)_
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track to display in the focus layout.
 
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
-_(Optional)_ The track to display in the focus layout.
+{% parameter name="track" type="TrackReferenceOrPlaceholder" optional=true deprecated=true %}
+_(Optional)_
+
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
 
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/focuslayoutcontainer.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "FocusLayoutContainer",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/FocusLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # FocusLayoutContainer
@@ -7,19 +14,27 @@ The `FocusLayoutContainer` is a layout component that expects two children: A sm
 ## Import
 
 ```typescript
-import { FocusLayoutContainer } from '@livekit/components-react';
+import { FocusLayoutContainer } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
 ## Properties
 
-{% parameter name="focusTrack" type="TrackReference" optional=true %}
+{% parameter name="focusTrack" type="TrackReference" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property has no effect and will be removed in a future version.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="participants" type="Array<Participant>" optional=true %}
+{% parameter name="participants" type="Array<Participant>" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property has no effect and will be removed in a future version.
+
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/focustoggle.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "FocusToggle",
+  "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. -->
 
 # FocusToggle
@@ -7,7 +14,7 @@ The `FocusToggle` puts the `ParticipantTile` in focus or removes it from focus.
 ## Import
 
 ```typescript
-import { FocusToggle } from '@livekit/components-react';
+import { FocusToggle } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -26,17 +33,25 @@ This component needs to live inside `LayoutContext` to work properly.
 
 ## Properties
 
-{% parameter name="participant" type="Participant" optional=true %}
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
 _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
 _(Optional)_
 
+{% 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 %}
+{% parameter name="trackSource" type="Track.Source" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/gridlayout.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "GridLayout",
+  "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. -->
 
 # GridLayout
@@ -7,7 +14,7 @@ The `GridLayout` component displays the nested participants in a grid where ever
 ## Import
 
 ```typescript
-import { GridLayout } from '@livekit/components-react';
+import { GridLayout } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/livekitroom.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "LiveKitRoom",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/LiveKitRoom.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # LiveKitRoom
@@ -7,7 +14,7 @@ The `LiveKitRoom` component provides the room context to all its child component
 ## Import
 
 ```typescript
-import { LiveKitRoom } from '@livekit/components-react';
+import { LiveKitRoom } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/mediadevicemenu.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "MediaDeviceMenu",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/MediaDeviceMenu.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # MediaDeviceMenu
@@ -7,7 +14,7 @@ The `MediaDeviceMenu` component is a button that opens a menu that lists all med
 ## Import
 
 ```typescript
-import { MediaDeviceMenu } from '@livekit/components-react';
+import { MediaDeviceMenu } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/mediadeviceselect.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "MediaDeviceSelect",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/MediaDeviceSelect.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # MediaDeviceSelect
@@ -7,7 +14,7 @@ The `MediaDeviceSelect` list all media devices of one kind. Clicking on one of t
 ## Import
 
 ```typescript
-import { MediaDeviceSelect } from '@livekit/components-react';
+import { MediaDeviceSelect } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/participantaudiotile.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantAudioTile",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantAudioTile.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantAudioTile
@@ -7,7 +14,7 @@ The `ParticipantAudioTile` component is the base utility wrapper for displaying
 ## Import
 
 ```typescript
-import { ParticipantAudioTile } from '@livekit/components-react';
+import { ParticipantAudioTile } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -30,22 +37,34 @@ _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="participant" type="Participant" optional=true %}
-_(Optional)_
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
 
 {% /parameter %}
 
-{% parameter name="publication" type="TrackPublication" optional=true %}
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="source" type="Track.Source" optional=true %}
+{% parameter name="publication" type="TrackPublication" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
-_(Optional)_ The track reference to display.
+{% parameter name="source" type="Track.Source" optional=true deprecated=true %}
+_(Optional)_
+
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
 
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/participantcontextifneeded.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantContextIfNeeded",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantTile.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantContextIfNeeded
@@ -7,7 +14,7 @@ The `ParticipantContextIfNeeded` component only creates a `ParticipantContext` i
 ## Import
 
 ```typescript
-import { ParticipantContextIfNeeded } from '@livekit/components-react';
+import { ParticipantContextIfNeeded } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/participantloop.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantLoop",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ParticipantLoop.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantLoop
@@ -7,7 +14,7 @@ The `ParticipantLoop` component loops over an array of participants to create a
 ## Import
 
 ```typescript
-import { ParticipantLoop } from '@livekit/components-react';
+import { ParticipantLoop } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/participantname.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantName",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantName.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantName
@@ -7,7 +14,7 @@ The `ParticipantName` component displays the name of the participant as a string
 ## Import
 
 ```typescript
-import { ParticipantName } from '@livekit/components-react';
+import { ParticipantName } from "@livekit/components-react";
 ```
 
 ## Usage