@livekit/components-js-docs 0.1.0 → 0.1.1

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

@@ -1,18 +1,25 @@
+---
+{
+  "title": "useVisualStableUpdate",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useVisualStableUpdate.ts"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # useVisualStableUpdate
 
-The `useVisualStableUpdate` hook is used to prevent visually jarring jumps and shifts of elements in an array. The algorithm only starts to update when there are more items than visually fit on a page. If this is the case, it will make sure that speaking participants move to the first page and are always visible. Updating the array can occur because attendees leave or join a room, or because they mute/unmute or start speaking.
+The `useVisualStableUpdate` hook is used to prevent visually jarring jumps and shifts of elements in an array. The algorithm only starts to update when there are more items than visually fit on a page. If this is the case, it will make sure that speaking participants move to the first page and are always visible.
 
 ## Import
 
 ```typescript
-import { useVisualStableUpdate } from '@livekit/components-react';
+import { useVisualStableUpdate } from "@livekit/components-react";
 ```
 
 ## Remarks
 
-The hook is used for the `GridLayout` and `CarouselLayout` components.
+Updating the array can occur because attendees leave or join a room, or because they mute/unmute or start speaking. The hook is used for the `GridLayout` and `CarouselLayout` components.
 
 ## Usage
 
@@ -23,7 +30,7 @@ const updatedTrackRefs = useVisualStableUpdate(trackRefs, itemPerPage);
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-## Parameters
+## Properties
 
 {% parameter name="maxItemsOnPage" type="number" optional=false %}
 {% /parameter %}

package/generated-docs/react/index.md

@@ -1,6 +1,10 @@
+---
+{ "title": "components-react package" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## components-react package
+# components-react package
 
 ## Components
 
@@ -49,64 +53,64 @@
 
 ## Hooks
 
-| Hook                                                                                                                                                               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [useChat(options)](./react/hook/usechat.md)                                                                                                                        | The <code>useChat</code> hook provides chat functionality for a LiveKit room. It returns a simple <code>send</code> function to send chat messages and an array of <code>chatMessages</code> to hold received messages.                                                                                                                                                                                                                                   |
-| [useChatToggle({ props })](./react/hook/usechattoggle.md)                                                                                                          | The <code>useChatToggle</code> hook provides state and functions for toggling the chat window.                                                                                                                                                                                                                                                                                                                                                            |
-| [useClearPinButton(props)](./react/hook/useclearpinbutton.md)                                                                                                      | The <code>useClearPinButton</code> hook provides props for the [ClearPinButton()](./react/component/clearpinbutton.md) or your custom implementation of it component. It adds the <code>onClick</code> handler to signal the <code>LayoutContext</code> that the tile in focus should be cleared.                                                                                                                                                         |
-| [useConnectionQualityIndicator(options)](./react/hook/useconnectionqualityindicator.md)                                                                            | The <code>useConnectionQualityIndicator</code> hook provides props for the <code>ConnectionQualityIndicator</code> or your custom implementation of it component.                                                                                                                                                                                                                                                                                         |
-| [useConnectionState(room)](./react/hook/useconnectionstate.md)                                                                                                     | The <code>useConnectionState</code> hook allows you to simply implement your own <code>ConnectionState</code> component.                                                                                                                                                                                                                                                                                                                                  |
-| [useCreateLayoutContext()](./react/hook/usecreatelayoutcontext.md)                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useDataChannel(topic, onMessage)](./react/hook/usedatachannel.md)                                                                                                 | The <code>useDataChannel</code> hook returns the ability to send and receive messages. By optionally passing a <code>topic</code>, you can narrow down which messages are returned in the messages array.                                                                                                                                                                                                                                                 |
-| [useDataChannel(onMessage)](./react/hook/usedatachannel_1.md)                                                                                                      | The <code>useDataChannel</code> hook returns the ability to send and receive messages.                                                                                                                                                                                                                                                                                                                                                                    |
-| [useDisconnectButton(props)](./react/hook/usedisconnectbutton.md)                                                                                                  | The <code>useDisconnectButton</code> hook is used to implement the <code>DisconnectButton</code> or your custom implementation of it. It adds onClick handler to the button to disconnect from the room.                                                                                                                                                                                                                                                  |
-| [useEnsureCreateLayoutContext(layoutContext)](./react/hook/useensurecreatelayoutcontext.md)                                                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useEnsureLayoutContext(layoutContext)](./react/hook/useensurelayoutcontext.md)                                                                                    | Ensures that a layout context is provided, either via context or explicitly as a parameter. If not inside a <code>LayoutContext</code> and no layout context is provided, an error is thrown.                                                                                                                                                                                                                                                             |
-| [useEnsureParticipant(participant)](./react/hook/useensureparticipant.md)                                                                                          | Ensures that a participant is provided, either via context or explicitly as a parameter. If not inside a <code>ParticipantContext</code> and no participant is provided, an error is thrown.                                                                                                                                                                                                                                                              |
-| [useEnsureRoom(room)](./react/hook/useensureroom.md)                                                                                                               | Ensures that a room is provided, either via context or explicitly as a parameter. If no room is provided, an error is thrown.                                                                                                                                                                                                                                                                                                                             |
-| [useEnsureTrackRef(trackRef)](./react/hook/useensuretrackref.md)                                                                                                   | Ensures that a track reference is provided, either via context or explicitly as a parameter. If not inside a <code>TrackRefContext</code> and no track reference is provided, an error is thrown.                                                                                                                                                                                                                                                         |
-| [useEnsureTrackReference(track)](./react/hook/useensuretrackreference.md)                                                                                          | Ensures that a track reference is provided, either via context or explicitly as a parameter. If not inside a <code>TrackContext</code> and no track reference is provided, an error is thrown.                                                                                                                                                                                                                                                            |
-| [useFocusToggle({ trackRef, trackSource, participant, props })](./react/hook/usefocustoggle.md)                                                                    | The <code>useFocusToggle</code> hook is used to implement the <code>FocusToggle</code> or your custom implementation of it. The <code>TrackReferenceOrPlaceholder</code> is used to register a onClick handler and to identify the track to focus on.                                                                                                                                                                                                     |
-| [useGridLayout(gridElement, trackCount)](./react/hook/usegridlayout.md)                                                                                            | The <code>useGridLayout</code> 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.     |
-| [useIsMuted(trackRef)](./react/hook/useismuted.md)                                                                                                                 | The <code>useIsMuted</code> hook is used to implement the <code>TrackMutedIndicator</code> or your custom implementation of it. It returns a <code>boolean</code> that indicates if the track is muted or not.                                                                                                                                                                                                                                            |
-| [useIsMuted(source, options)](./react/hook/useismuted_1.md)                                                                                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useIsSpeaking(participant)](./react/hook/useisspeaking.md)                                                                                                        | The <code>useIsSpeaking</code> hook returns a <code>boolean</code> that indicates if the participant is speaking or not.                                                                                                                                                                                                                                                                                                                                  |
-| [useLayoutContext()](./react/hook/uselayoutcontext.md)                                                                                                             | Ensures that a layout context is provided via context. If no layout context is provided, an error is thrown.                                                                                                                                                                                                                                                                                                                                              |
-| [useLiveKitRoom(props)](./react/hook/uselivekitroom.md)                                                                                                            | The <code>useLiveKitRoom</code> hook is used to implement the <code>LiveKitRoom</code> or your custom implementation of it. It returns a <code>Room</code> instance and HTML props that should be applied to the root element of the component.                                                                                                                                                                                                           |
-| [useLocalParticipant(options)](./react/hook/uselocalparticipant.md)                                                                                                | The <code>useLocalParticipant</code> hook returns the local participant and the associated state around the participant.                                                                                                                                                                                                                                                                                                                                  |
-| [useLocalParticipantPermissions()](./react/hook/uselocalparticipantpermissions.md)                                                                                 | The <code>useLocalParticipantPermissions</code> hook returns the local participant's permissions.                                                                                                                                                                                                                                                                                                                                                         |
-| [useMaybeLayoutContext()](./react/hook/usemaybelayoutcontext.md)                                                                                                   | Returns a layout context from the <code>LayoutContext</code> if it exists, otherwise <code>undefined</code>.                                                                                                                                                                                                                                                                                                                                              |
-| [useMaybeParticipantContext()](./react/hook/usemaybeparticipantcontext.md)                                                                                         | Returns a participant from the <code>ParticipantContext</code> if it exists, otherwise <code>undefined</code>.                                                                                                                                                                                                                                                                                                                                            |
-| [useMaybeRoomContext()](./react/hook/usemayberoomcontext.md)                                                                                                       | Returns the room context if it exists, otherwise undefined.                                                                                                                                                                                                                                                                                                                                                                                               |
-| [useMaybeTrackContext()](./react/hook/usemaybetrackcontext.md)                                                                                                     | Returns a track reference from the <code>TrackContext</code> if it exists, otherwise <code>undefined</code>.                                                                                                                                                                                                                                                                                                                                              |
-| [useMaybeTrackRefContext()](./react/hook/usemaybetrackrefcontext.md)                                                                                               | Returns a track reference from the <code>TrackRefContext</code> if it exists, otherwise <code>undefined</code>.                                                                                                                                                                                                                                                                                                                                           |
-| [useMediaDevices({ kind })](./react/hook/usemediadevices.md)                                                                                                       | The <code>useMediaDevices</code> hook returns the list of media devices of a given kind.                                                                                                                                                                                                                                                                                                                                                                  |
-| [useMediaDeviceSelect({ kind, room, track, requestPermissions, })](./react/hook/usemediadeviceselect.md)                                                           | The <code>useMediaDeviceSelect</code> hook is used to implement the <code>MediaDeviceSelect</code> component and returns o.a. the list of devices of a given kind (audioinput or videoinput), the currently active device and a function to set the the active device.                                                                                                                                                                                    |
-| [useMediaTrack(source, participant, options)](./react/hook/usemediatrack.md)                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useMediaTrackByName(name, participant, options)](./react/hook/usemediatrackbyname.md)                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useParticipantContext()](./react/hook/useparticipantcontext.md)                                                                                                   | Ensures that a participant is provided via context. If not inside a <code>ParticipantContext</code>, an error is thrown.                                                                                                                                                                                                                                                                                                                                  |
-| [useParticipantInfo(props)](./react/hook/useparticipantinfo.md)                                                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useParticipantPermissions(options)](./react/hook/useparticipantpermissions.md)                                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useParticipants(options)](./react/hook/useparticipants.md)                                                                                                        | The <code>useParticipants</code> hook returns all participants (local and remote) of the current room.                                                                                                                                                                                                                                                                                                                                                    |
-| [useParticipantTile({ trackRef, participant, source, publication, onParticipantClick, disableSpeakingIndicator, htmlProps, })](./react/hook/useparticipanttile.md) | The <code>useParticipantTile</code> hook is used to implement the <code>ParticipantTile</code> and returns the props needed to render the tile.                                                                                                                                                                                                                                                                                                           |
-| [usePinnedTracks(layoutContext)](./react/hook/usepinnedtracks.md)                                                                                                  | The <code>usePinnedTracks</code> hook returns a array of the pinned tracks of the current room.                                                                                                                                                                                                                                                                                                                                                           |
-| [usePreviewDevice(enabled, deviceId, kind)](./react/hook/usepreviewdevice.md)                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useRemoteParticipant(identity, options)](./react/hook/useremoteparticipant.md)                                                                                    | The <code>useRemoteParticipant</code> hook returns the RemoteParticipant with the given <code>identity</code>.                                                                                                                                                                                                                                                                                                                                            |
-| [useRemoteParticipants(options)](./react/hook/useremoteparticipants.md)                                                                                            | The <code>useRemoteParticipants</code> hook returns all remote participants (without the local) of the current room.                                                                                                                                                                                                                                                                                                                                      |
-| [useRoomContext()](./react/hook/useroomcontext.md)                                                                                                                 | Ensures that a room is provided via context. If no room is provided, an error is thrown.                                                                                                                                                                                                                                                                                                                                                                  |
-| [useRoomInfo(options)](./react/hook/useroominfo.md)                                                                                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useSortedParticipants(participants)](./react/hook/usesortedparticipants.md)                                                                                       | The <code>useSortedParticipants</code> hook returns the participants sorted by importance.                                                                                                                                                                                                                                                                                                                                                                |
-| [useSpeakingParticipants()](./react/hook/usespeakingparticipants.md)                                                                                               | The <code>useSpeakingParticipants</code> hook returns the only the active speakers of all participants.                                                                                                                                                                                                                                                                                                                                                   |
-| [useToken(tokenEndpoint, roomName, options)](./react/hook/usetoken.md)                                                                                             | The <code>useToken</code> hook fetches a token from the given token endpoint with the given user info.                                                                                                                                                                                                                                                                                                                                                    |
-| [useTrack(trackRef, options)](./react/hook/usetrack.md)                                                                                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useTrackByName(trackRef, options)](./react/hook/usetrackbyname.md)                                                                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useTrackContext()](./react/hook/usetrackcontext.md)                                                                                                               | Ensures that a track reference is provided via context. If not inside a <code>TrackRefContext</code>, an error is thrown.                                                                                                                                                                                                                                                                                                                                 |
-| [useTrackMutedIndicator(trackRef)](./react/hook/usetrackmutedindicator.md)                                                                                         | The <code>useTrackMutedIndicator</code> hook is used to implement the <code>TrackMutedIndicator</code> component and returns the muted state of the given track.                                                                                                                                                                                                                                                                                          |
-| [useTrackMutedIndicator(source, options)](./react/hook/usetrackmutedindicator_1.md)                                                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| [useTrackRefContext()](./react/hook/usetrackrefcontext.md)                                                                                                         | Ensures that a track reference is provided via context. If not inside a <code>TrackRefContext</code>, an error is thrown.                                                                                                                                                                                                                                                                                                                                 |
-| [useTracks(sources, options)](./react/hook/usetracks.md)                                                                                                           | The <code>useTracks</code> hook returns an array of <code>TrackReference</code> or <code>TrackReferenceOrPlaceholder</code> depending on the provided <code>sources</code> property. If only subscribed tracks are desired, set the <code>onlySubscribed</code> property to <code>true</code>.                                                                                                                                                            |
-| [useTrackToggle({ source, onChange, initialState, captureOptions, ...rest })](./react/hook/usetracktoggle.md)                                                      | The <code>useTrackToggle</code> hook is used to implement the <code>TrackToggle</code> component and returns state and functionality of the given track.                                                                                                                                                                                                                                                                                                  |
-| [useVisualStableUpdate(trackReferences, maxItemsOnPage, options)](./react/hook/usevisualstableupdate.md)                                                           | The <code>useVisualStableUpdate</code> hook is used to prevent visually jarring jumps and shifts of elements in an array. The algorithm only starts to update when there are more items than visually fit on a page. If this is the case, it will make sure that speaking participants move to the first page and are always visible. Updating the array can occur because attendees leave or join a room, or because they mute/unmute or start speaking. |
+| Hook                                                                                                                                                               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [useChat(options)](./react/hook/usechat.md)                                                                                                                        | The <code>useChat</code> hook provides chat functionality for a LiveKit room. It returns a simple <code>send</code> function to send chat messages and an array of <code>chatMessages</code> to hold received messages.                                                                                                                                                                                                                               |
+| [useChatToggle({ props })](./react/hook/usechattoggle.md)                                                                                                          | The <code>useChatToggle</code> hook provides state and functions for toggling the chat window.                                                                                                                                                                                                                                                                                                                                                        |
+| [useClearPinButton(props)](./react/hook/useclearpinbutton.md)                                                                                                      | The <code>useClearPinButton</code> hook provides props for the [ClearPinButton()](./react/component/clearpinbutton.md) or your custom implementation of it component. It adds the <code>onClick</code> handler to signal the <code>LayoutContext</code> that the tile in focus should be cleared.                                                                                                                                                     |
+| [useConnectionQualityIndicator(options)](./react/hook/useconnectionqualityindicator.md)                                                                            | The <code>useConnectionQualityIndicator</code> hook provides props for the <code>ConnectionQualityIndicator</code> or your custom implementation of it component.                                                                                                                                                                                                                                                                                     |
+| [useConnectionState(room)](./react/hook/useconnectionstate.md)                                                                                                     | The <code>useConnectionState</code> hook allows you to simply implement your own <code>ConnectionState</code> component.                                                                                                                                                                                                                                                                                                                              |
+| [useCreateLayoutContext()](./react/hook/usecreatelayoutcontext.md)                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useDataChannel(topic, onMessage)](./react/hook/usedatachannel.md)                                                                                                 | The <code>useDataChannel</code> hook returns the ability to send and receive messages. By optionally passing a <code>topic</code>, you can narrow down which messages are returned in the messages array.                                                                                                                                                                                                                                             |
+| [useDataChannel(onMessage)](./react/hook/usedatachannel_1.md)                                                                                                      | The <code>useDataChannel</code> hook returns the ability to send and receive messages.                                                                                                                                                                                                                                                                                                                                                                |
+| [useDisconnectButton(props)](./react/hook/usedisconnectbutton.md)                                                                                                  | The <code>useDisconnectButton</code> hook is used to implement the <code>DisconnectButton</code> or your custom implementation of it. It adds onClick handler to the button to disconnect from the room.                                                                                                                                                                                                                                              |
+| [useEnsureCreateLayoutContext(layoutContext)](./react/hook/useensurecreatelayoutcontext.md)                                                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useEnsureLayoutContext(layoutContext)](./react/hook/useensurelayoutcontext.md)                                                                                    | Ensures that a layout context is provided, either via context or explicitly as a parameter. If not inside a <code>LayoutContext</code> and no layout context is provided, an error is thrown.                                                                                                                                                                                                                                                         |
+| [useEnsureParticipant(participant)](./react/hook/useensureparticipant.md)                                                                                          | Ensures that a participant is provided, either via context or explicitly as a parameter. If not inside a <code>ParticipantContext</code> and no participant is provided, an error is thrown.                                                                                                                                                                                                                                                          |
+| [useEnsureRoom(room)](./react/hook/useensureroom.md)                                                                                                               | Ensures that a room is provided, either via context or explicitly as a parameter. If no room is provided, an error is thrown.                                                                                                                                                                                                                                                                                                                         |
+| [useEnsureTrackRef(trackRef)](./react/hook/useensuretrackref.md)                                                                                                   | Ensures that a track reference is provided, either via context or explicitly as a parameter. If not inside a <code>TrackRefContext</code> and no track reference is provided, an error is thrown.                                                                                                                                                                                                                                                     |
+| [useEnsureTrackReference(track)](./react/hook/useensuretrackreference.md)                                                                                          | Ensures that a track reference is provided, either via context or explicitly as a parameter. If not inside a <code>TrackContext</code> and no track reference is provided, an error is thrown.                                                                                                                                                                                                                                                        |
+| [useFocusToggle({ trackRef, trackSource, participant, props })](./react/hook/usefocustoggle.md)                                                                    | The <code>useFocusToggle</code> hook is used to implement the <code>FocusToggle</code> or your custom implementation of it. The <code>TrackReferenceOrPlaceholder</code> is used to register a onClick handler and to identify the track to focus on.                                                                                                                                                                                                 |
+| [useGridLayout(gridElement, trackCount)](./react/hook/usegridlayout.md)                                                                                            | The <code>useGridLayout</code> 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. |
+| [useIsMuted(trackRef)](./react/hook/useismuted.md)                                                                                                                 | The <code>useIsMuted</code> hook is used to implement the <code>TrackMutedIndicator</code> or your custom implementation of it. It returns a <code>boolean</code> that indicates if the track is muted or not.                                                                                                                                                                                                                                        |
+| [useIsMuted(source, options)](./react/hook/useismuted_1.md)                                                                                                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useIsSpeaking(participant)](./react/hook/useisspeaking.md)                                                                                                        | The <code>useIsSpeaking</code> hook returns a <code>boolean</code> that indicates if the participant is speaking or not.                                                                                                                                                                                                                                                                                                                              |
+| [useLayoutContext()](./react/hook/uselayoutcontext.md)                                                                                                             | Ensures that a layout context is provided via context. If no layout context is provided, an error is thrown.                                                                                                                                                                                                                                                                                                                                          |
+| [useLiveKitRoom(props)](./react/hook/uselivekitroom.md)                                                                                                            | The <code>useLiveKitRoom</code> hook is used to implement the <code>LiveKitRoom</code> or your custom implementation of it. It returns a <code>Room</code> instance and HTML props that should be applied to the root element of the component.                                                                                                                                                                                                       |
+| [useLocalParticipant(options)](./react/hook/uselocalparticipant.md)                                                                                                | The <code>useLocalParticipant</code> hook returns the local participant and the associated state around the participant.                                                                                                                                                                                                                                                                                                                              |
+| [useLocalParticipantPermissions()](./react/hook/uselocalparticipantpermissions.md)                                                                                 | The <code>useLocalParticipantPermissions</code> hook returns the local participant's permissions.                                                                                                                                                                                                                                                                                                                                                     |
+| [useMaybeLayoutContext()](./react/hook/usemaybelayoutcontext.md)                                                                                                   | Returns a layout context from the <code>LayoutContext</code> if it exists, otherwise <code>undefined</code>.                                                                                                                                                                                                                                                                                                                                          |
+| [useMaybeParticipantContext()](./react/hook/usemaybeparticipantcontext.md)                                                                                         | Returns a participant from the <code>ParticipantContext</code> if it exists, otherwise <code>undefined</code>.                                                                                                                                                                                                                                                                                                                                        |
+| [useMaybeRoomContext()](./react/hook/usemayberoomcontext.md)                                                                                                       | Returns the room context if it exists, otherwise undefined.                                                                                                                                                                                                                                                                                                                                                                                           |
+| [useMaybeTrackContext()](./react/hook/usemaybetrackcontext.md)                                                                                                     | Returns a track reference from the <code>TrackContext</code> if it exists, otherwise <code>undefined</code>.                                                                                                                                                                                                                                                                                                                                          |
+| [useMaybeTrackRefContext()](./react/hook/usemaybetrackrefcontext.md)                                                                                               | Returns a track reference from the <code>TrackRefContext</code> if it exists, otherwise <code>undefined</code>.                                                                                                                                                                                                                                                                                                                                       |
+| [useMediaDevices({ kind })](./react/hook/usemediadevices.md)                                                                                                       | The <code>useMediaDevices</code> hook returns the list of media devices of a given kind.                                                                                                                                                                                                                                                                                                                                                              |
+| [useMediaDeviceSelect({ kind, room, track, requestPermissions, })](./react/hook/usemediadeviceselect.md)                                                           | The <code>useMediaDeviceSelect</code> hook is used to implement the <code>MediaDeviceSelect</code> component and returns o.a. the list of devices of a given kind (audioinput or videoinput), the currently active device and a function to set the the active device.                                                                                                                                                                                |
+| [useMediaTrack(source, participant, options)](./react/hook/usemediatrack.md)                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useMediaTrackByName(name, participant, options)](./react/hook/usemediatrackbyname.md)                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useParticipantContext()](./react/hook/useparticipantcontext.md)                                                                                                   | Ensures that a participant is provided via context. If not inside a <code>ParticipantContext</code>, an error is thrown.                                                                                                                                                                                                                                                                                                                              |
+| [useParticipantInfo(props)](./react/hook/useparticipantinfo.md)                                                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useParticipantPermissions(options)](./react/hook/useparticipantpermissions.md)                                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useParticipants(options)](./react/hook/useparticipants.md)                                                                                                        | The <code>useParticipants</code> hook returns all participants (local and remote) of the current room.                                                                                                                                                                                                                                                                                                                                                |
+| [useParticipantTile({ trackRef, participant, source, publication, onParticipantClick, disableSpeakingIndicator, htmlProps, })](./react/hook/useparticipanttile.md) | The <code>useParticipantTile</code> hook is used to implement the <code>ParticipantTile</code> and returns the props needed to render the tile.                                                                                                                                                                                                                                                                                                       |
+| [usePinnedTracks(layoutContext)](./react/hook/usepinnedtracks.md)                                                                                                  | The <code>usePinnedTracks</code> hook returns a array of the pinned tracks of the current room.                                                                                                                                                                                                                                                                                                                                                       |
+| [usePreviewDevice(enabled, deviceId, kind)](./react/hook/usepreviewdevice.md)                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useRemoteParticipant(identity, options)](./react/hook/useremoteparticipant.md)                                                                                    | The <code>useRemoteParticipant</code> hook returns the RemoteParticipant with the given <code>identity</code>.                                                                                                                                                                                                                                                                                                                                        |
+| [useRemoteParticipants(options)](./react/hook/useremoteparticipants.md)                                                                                            | The <code>useRemoteParticipants</code> hook returns all remote participants (without the local) of the current room.                                                                                                                                                                                                                                                                                                                                  |
+| [useRoomContext()](./react/hook/useroomcontext.md)                                                                                                                 | Ensures that a room is provided via context. If no room is provided, an error is thrown.                                                                                                                                                                                                                                                                                                                                                              |
+| [useRoomInfo(options)](./react/hook/useroominfo.md)                                                                                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useSortedParticipants(participants)](./react/hook/usesortedparticipants.md)                                                                                       | The <code>useSortedParticipants</code> hook returns the participants sorted by importance.                                                                                                                                                                                                                                                                                                                                                            |
+| [useSpeakingParticipants()](./react/hook/usespeakingparticipants.md)                                                                                               | The <code>useSpeakingParticipants</code> hook returns the only the active speakers of all participants.                                                                                                                                                                                                                                                                                                                                               |
+| [useToken(tokenEndpoint, roomName, options)](./react/hook/usetoken.md)                                                                                             | The <code>useToken</code> hook fetches a token from the given token endpoint with the given user info.                                                                                                                                                                                                                                                                                                                                                |
+| [useTrack(trackRef, options)](./react/hook/usetrack.md)                                                                                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useTrackByName(trackRef, options)](./react/hook/usetrackbyname.md)                                                                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useTrackContext()](./react/hook/usetrackcontext.md)                                                                                                               | Ensures that a track reference is provided via context. If not inside a <code>TrackRefContext</code>, an error is thrown.                                                                                                                                                                                                                                                                                                                             |
+| [useTrackMutedIndicator(trackRef)](./react/hook/usetrackmutedindicator.md)                                                                                         | The <code>useTrackMutedIndicator</code> hook is used to implement the <code>TrackMutedIndicator</code> component and returns the muted state of the given track.                                                                                                                                                                                                                                                                                      |
+| [useTrackMutedIndicator(source, options)](./react/hook/usetrackmutedindicator_1.md)                                                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [useTrackRefContext()](./react/hook/usetrackrefcontext.md)                                                                                                         | Ensures that a track reference is provided via context. If not inside a <code>TrackRefContext</code>, an error is thrown.                                                                                                                                                                                                                                                                                                                             |
+| [useTracks(sources, options)](./react/hook/usetracks.md)                                                                                                           | The <code>useTracks</code> hook returns an array of <code>TrackReference</code> or <code>TrackReferenceOrPlaceholder</code> depending on the provided <code>sources</code> property. If only subscribed tracks are desired, set the <code>onlySubscribed</code> property to <code>true</code>.                                                                                                                                                        |
+| [useTrackToggle({ source, onChange, initialState, captureOptions, ...rest })](./react/hook/usetracktoggle.md)                                                      | The <code>useTrackToggle</code> hook is used to implement the <code>TrackToggle</code> component and returns state and functionality of the given track.                                                                                                                                                                                                                                                                                              |
+| [useVisualStableUpdate(trackReferences, maxItemsOnPage, options)](./react/hook/usevisualstableupdate.md)                                                           | The <code>useVisualStableUpdate</code> hook is used to prevent visually jarring jumps and shifts of elements in an array. The algorithm only starts to update when there are more items than visually fit on a page. If this is the case, it will make sure that speaking participants move to the first page and are always visible.                                                                                                                 |
 
 ## Others
 

package/generated-docs/react/layoutcontext.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "LayoutContext variable",
+  "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. -->
 
-## LayoutContext variable
+# LayoutContext variable
 
 **Signature:**
 

package/generated-docs/react/layoutcontexttype.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "LayoutContextType type",
+  "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. -->
 
-## LayoutContextType type
+# LayoutContextType type
 
 **Signature:**
 

package/generated-docs/react/livekitroomprops.audio.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.audio property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.audio property
+# LiveKitRoomProps.audio property
 
 Publish audio immediately after connecting to your LiveKit room.
 

package/generated-docs/react/livekitroomprops.connect.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.connect property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.connect property
+# LiveKitRoomProps.connect property
 
 If set to true a connection to LiveKit room is initiated.
 

package/generated-docs/react/livekitroomprops.connectoptions.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.connectOptions property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.connectOptions property
+# LiveKitRoomProps.connectOptions property
 
 Define options how to connect to the LiveKit server.
 

package/generated-docs/react/livekitroomprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "LiveKitRoomProps interface",
+  "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. -->
 
-## LiveKitRoomProps interface
+# LiveKitRoomProps interface
 
 **Signature:**
 

package/generated-docs/react/livekitroomprops.onconnected.md

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

package/generated-docs/react/livekitroomprops.ondisconnected.md

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

package/generated-docs/react/livekitroomprops.onerror.md

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

package/generated-docs/react/livekitroomprops.onmediadevicefailure.md

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

package/generated-docs/react/livekitroomprops.options.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.options property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.options property
+# LiveKitRoomProps.options property
 
 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.
 

package/generated-docs/react/livekitroomprops.room.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.room property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.room property
+# LiveKitRoomProps.room property
 
 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.
 

package/generated-docs/react/livekitroomprops.screen.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.screen property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.screen property
+# LiveKitRoomProps.screen property
 
 Publish screen share immediately after connecting to your LiveKit room.
 

package/generated-docs/react/livekitroomprops.serverurl.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.serverUrl property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.serverUrl property
+# LiveKitRoomProps.serverUrl property
 
 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.
 

package/generated-docs/react/livekitroomprops.simulateparticipants.md

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

package/generated-docs/react/livekitroomprops.token.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.token property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.token property
+# LiveKitRoomProps.token property
 
 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.
 

package/generated-docs/react/livekitroomprops.video.md

@@ -1,6 +1,10 @@
+---
+{ "title": "LiveKitRoomProps.video property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## LiveKitRoomProps.video property
+# LiveKitRoomProps.video property
 
 Publish video immediately after connecting to your LiveKit room.
 

package/generated-docs/react/localuserchoices.md

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

package/generated-docs/react/mediadevicemenuprops.initialselection.md

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

package/generated-docs/react/mediadevicemenuprops.kind.md

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

package/generated-docs/react/mediadevicemenuprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "MediaDeviceMenuProps interface",
+  "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. -->
 
-## MediaDeviceMenuProps interface
+# MediaDeviceMenuProps interface
 
 **Signature:**
 

package/generated-docs/react/mediadevicemenuprops.onactivedevicechange.md

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