@livekit/components-js-docs 0.0.2

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

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# AudioVisualizer (component)
+
+## Import
+
+```typescript
+import { AudioVisualizer } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                    | Type        | Description  |
+| ----------------------------------------------------------- | ----------- | ------------ |
+| [participant?](./react/audiovisualizerprops.participant.md) | Participant | _(Optional)_ |

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

@@ -0,0 +1,30 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# CarouselView (component)
+
+The `CarouselLayout` displays a list of tracks horizontally or vertically. Depending on the size of the container, the carousel will display as many tiles as possible and overflows the rest. The CarouselLayout uses the `useVisualStableUpdate` hook to ensure that tile reordering due to track updates is visually stable but still moves the important tiles (speaking participants) to the front.
+
+## Import
+
+```typescript
+import { CarouselView } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+const tracks = useTracks();
+<CarouselLayout tracks={tracks}>
+  <ParticipantTile />
+</CarouselLayout>;
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                 | Type                                                                             | Description                                                                                                                                         |
+| -------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [children](./react/carouselviewprops.children.md)        | React.ReactNode                                                                  |                                                                                                                                                     |
+| [orientation?](./react/carouselviewprops.orientation.md) | 'vertical' \| 'horizontal'                                                       | _(Optional)_ Place the tiles vertically or horizontally next to each other. If undefined orientation is guessed by the dimensions of the container. |
+| [tracks](./react/carouselviewprops.tracks.md)            | [TrackReferenceOrPlaceholder](./core/trackreferenceorplaceholder.md)<!-- -->\[\] |                                                                                                                                                     |

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

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# Chat (prefab)
+
+The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants in the room. Only users who are in the room at the time of dispatch will receive the message.
+
+## Import
+
+```typescript
+import { Chat } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <Chat />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                   | Type                                            | Description  |
+| ---------------------------------------------------------- | ----------------------------------------------- | ------------ |
+| [messageFormatter?](./react/chatprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md) | _(Optional)_ |

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

@@ -0,0 +1,30 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatEntry (component)
+
+The `ChatEntry` component holds and displays one chat message.
+
+## Import
+
+```typescript
+import { ChatEntry } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<Chat>
+  <ChatEntry />
+</Chat>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                        | Type                                                 | Description                                                                                                    |
+| --------------------------------------------------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| [entry](./react/chatentryprops.entry.md)                        | [ReceivedChatMessage](./core/receivedchatmessage.md) | The chat massage object to display.                                                                            |
+| [hideName?](./react/chatentryprops.hidename.md)                 | boolean                                              | _(Optional)_ Hide sender name. Useful when displaying multiple consecutive chat messages from the same person. |
+| [hideTimestamp?](./react/chatentryprops.hidetimestamp.md)       | boolean                                              | _(Optional)_ Hide message timestamp.                                                                           |
+| [messageFormatter?](./react/chatentryprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md)      | _(Optional)_ An optional formatter for the message body.                                                       |

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

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatToggle (component)
+
+The ChatToggle component toggles the visibility of the chat component.
+
+## Import
+
+```typescript
+import { ChatToggle } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <ToggleChat />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}

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

@@ -0,0 +1,25 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ClearPinButton (component)
+
+The ClearPinButton is a basic html button with the added ability to signal the LiveKitRoom that it should display the grid view again.
+
+## Import
+
+```typescript
+import { ClearPinButton } from '@livekit/components-react';
+```
+
+## Remarks
+
+This component works only inside a PinContext.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <ClearPinButton>Leave room</ClearPinButton>
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}

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

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionQualityIndicator (component)
+
+The ConnectionQualityIndicator shows the individual connection quality of a participant.
+
+## Import
+
+```typescript
+import { ConnectionQualityIndicator } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<ConnectionQualityIndicator />
+```
+
+{% partial file="p_usage.md" /%}

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

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionState (component)
+
+The ConnectionState component displays the connection status of the room in written form.
+
+## Import
+
+```typescript
+import { ConnectionState } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <ConnectionState />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                       | Type | Description                                                                 |
+| ---------------------------------------------- | ---- | --------------------------------------------------------------------------- |
+| [room?](./react/connectionstatusprops.room.md) | Room | _(Optional)_ The room from which the connection status should be displayed. |

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

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ConnectionStateToast (component)
+
+## Import
+
+```typescript
+import { ConnectionStateToast } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                           | Type | Description  |
+| -------------------------------------------------- | ---- | ------------ |
+| [room?](./react/connectionstatetoastprops.room.md) | Room | _(Optional)_ |

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

@@ -0,0 +1,32 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ControlBar (prefab)
+
+The ControlBar prefab component gives the user the basic user interface to control their media devices and leave the room.
+
+## Import
+
+```typescript
+import { ControlBar } from '@livekit/components-react';
+```
+
+## Remarks
+
+This component is build with other LiveKit components like `TrackToggle`<!-- -->, `DeviceSelectorButton`<!-- -->, `DisconnectButton` and `StartAudio`<!-- -->.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <ControlBar />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                           | Type                                                | Description  |
+| -------------------------------------------------- | --------------------------------------------------- | ------------ |
+| [controls?](./react/controlbarprops.controls.md)   | [ControlBarControls](./react/controlbarcontrols.md) | _(Optional)_ |
+| [variation?](./react/controlbarprops.variation.md) | 'minimal' \| 'verbose' \| 'textOnly'                | _(Optional)_ |

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

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# DisconnectButton (component)
+
+The DisconnectButton is a basic html button with the added ability to disconnect from a LiveKit room. Normally, it is used by end-users to leave a video or audio call.
+
+## Import
+
+```typescript
+import { DisconnectButton } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <DisconnectButton>Leave room</DisconnectButton>
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                   | Type    | Description  |
+| ---------------------------------------------------------- | ------- | ------------ |
+| [stopTracks?](./react/disconnectbuttonprops.stoptracks.md) | boolean | _(Optional)_ |

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

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusLayout (component)
+
+## Import
+
+```typescript
+import { FocusLayout } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                              | Type                                                                               | Description  |
+| --------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------ |
+| [onParticipantClick?](./react/focuslayoutprops.onparticipantclick.md) | (evt: [ParticipantClickEvent](./core/participantclickevent.md)<!-- -->) =&gt; void | _(Optional)_ |
+| [track?](./react/focuslayoutprops.track.md)                           | [TrackReferenceOrPlaceholder](./core/trackreferenceorplaceholder.md)               | _(Optional)_ |

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

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusLayoutContainer (component)
+
+## Import
+
+```typescript
+import { FocusLayoutContainer } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                           | Type                                       | Description  |
+| ------------------------------------------------------------------ | ------------------------------------------ | ------------ |
+| [focusTrack?](./react/focuslayoutcontainerprops.focustrack.md)     | [TrackReference](./core/trackreference.md) | _(Optional)_ |
+| [participants?](./react/focuslayoutcontainerprops.participants.md) | Array&lt;Participant&gt;                   | _(Optional)_ |

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

@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# FocusToggle (component)
+
+The FocusToggle puts the ParticipantTile in focus or removes it from focus.
+
+## Import
+
+```typescript
+import { FocusToggle } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<ParticipantTile>
+  <FocusToggle />
+</ParticipantTile>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                | Type         | Description  |
+| ------------------------------------------------------- | ------------ | ------------ |
+| [participant?](./react/focustoggleprops.participant.md) | Participant  | _(Optional)_ |
+| [trackSource](./react/focustoggleprops.tracksource.md)  | Track.Source |              |

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# formatChatMessageLinks (component)
+
+## Import
+
+```typescript
+import { formatChatMessageLinks } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" /%}

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

@@ -0,0 +1,30 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# GridLayout (component)
+
+The GridLayout component displays the nested participants in a grid where every participants has the same size.
+
+## Import
+
+```typescript
+import { GridLayout } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <GridLayout tracks={tracks}>
+    <ParticipantTile />
+  </GridLayout>
+<LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                        | Type                                                                             | Description |
+| ----------------------------------------------- | -------------------------------------------------------------------------------- | ----------- |
+| [children](./react/gridlayoutprops.children.md) | React.ReactNode                                                                  |             |
+| [tracks](./react/gridlayoutprops.tracks.md)     | [TrackReferenceOrPlaceholder](./core/trackreferenceorplaceholder.md)<!-- -->\[\] |             |

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

@@ -0,0 +1,40 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# LiveKitRoom (component)
+
+The LiveKitRoom component provides the room context to all its child components. It is generally the starting point of your LiveKit app and the root of the LiveKit component tree. It provides the room state as a React context to all child components, so you don't have to pass it yourself.
+
+## Import
+
+```typescript
+import { LiveKitRoom } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom token="<livekit-token>" serverUrl="<url-to-livekit-server>" connect={true}>
+  ...
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                                  | Type                                      | Description                                                                                                                                                                                                                                                                                                   |
+| ------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [audio?](./react/livekitroomprops.audio.md)                               | AudioCaptureOptions \| boolean            | _(Optional)_ Publish audio immediately after connecting to your LiveKit room.                                                                                                                                                                                                                                 |
+| [connect?](./react/livekitroomprops.connect.md)                           | boolean                                   | _(Optional)_ If set to true a connection to LiveKit room is initiated.                                                                                                                                                                                                                                        |
+| [connectOptions?](./react/livekitroomprops.connectoptions.md)             | RoomConnectOptions                        | _(Optional)_ Define options how to connect to the LiveKit server.                                                                                                                                                                                                                                             |
+| [onConnected?](./react/livekitroomprops.onconnected.md)                   | () =&gt; void                             | _(Optional)_                                                                                                                                                                                                                                                                                                  |
+| [onDisconnected?](./react/livekitroomprops.ondisconnected.md)             | () =&gt; void                             | _(Optional)_                                                                                                                                                                                                                                                                                                  |
+| [onError?](./react/livekitroomprops.onerror.md)                           | (error: Error) =&gt; void                 | _(Optional)_                                                                                                                                                                                                                                                                                                  |
+| [onMediaDeviceFailure?](./react/livekitroomprops.onmediadevicefailure.md) | (failure?: MediaDeviceFailure) =&gt; void | _(Optional)_                                                                                                                                                                                                                                                                                                  |
+| [options?](./react/livekitroomprops.options.md)                           | RoomOptions                               | _(Optional)_ 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.                                                                                                              |
+| [room?](./react/livekitroomprops.room.md)                                 | Room                                      | _(Optional)_ Optional room instance. By passing your own room instance you overwrite the <code>options</code> parameter, make sure to set the options directly on the room instance itself.                                                                                                                   |
+| [screen?](./react/livekitroomprops.screen.md)                             | ScreenShareCaptureOptions \| boolean      | _(Optional)_ Publish screen share immediately after connecting to your LiveKit room.                                                                                                                                                                                                                          |
+| [serverUrl](./react/livekitroomprops.serverurl.md)                        | string \| undefined                       | URL to the LiveKit server. For example: <code>wss://&lt;domain&gt;.livekit.cloud</code> To simplify the implementation, <code>undefined</code> is also accepted as an intermediate value, but only with a valid string url can the connection be established.                                                 |
+| [simulateParticipants?](./react/livekitroomprops.simulateparticipants.md) | number \| undefined                       | _(Optional)_                                                                                                                                                                                                                                                                                                  |
+| [token](./react/livekitroomprops.token.md)                                | string \| undefined                       | 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, <code>undefined</code> is also accepted as an intermediate value, but only with a valid string token can the connection be established. |
+| [video?](./react/livekitroomprops.video.md)                               | VideoCaptureOptions \| boolean            | _(Optional)_ Publish video immediately after connecting to your LiveKit room.                                                                                                                                                                                                                                 |

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

@@ -0,0 +1,35 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# MediaDeviceMenu (prefab)
+
+The MediaDeviceMenu prefab component is a button that opens a menu that lists all media devices and allows the user to select them.
+
+## Import
+
+```typescript
+import { MediaDeviceMenu } from '@livekit/components-react';
+```
+
+## Remarks
+
+This component is implemented with the `MediaDeviceSelect` LiveKit components.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <MediaDeviceMenu />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                                      | Type                                                                                          | Description                                                                                                                                                                                                                                                                                                                                              |
+| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [initialSelection?](./react/mediadevicemenuprops.initialselection.md)         | string                                                                                        | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |
+| [kind?](./react/mediadevicemenuprops.kind.md)                                 | MediaDeviceKind                                                                               | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |
+| [onActiveDeviceChange?](./react/mediadevicemenuprops.onactivedevicechange.md) | (kind: MediaDeviceKind, deviceId: string) =&gt; void                                          | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |
+| [requestPermissions?](./react/mediadevicemenuprops.requestpermissions.md)     | boolean                                                                                       | _(Optional)_ this will call getUserMedia if the permissions are not yet given to enumerate the devices with device labels. in some browsers multiple calls to getUserMedia result in multiple permission prompts. It's generally advised only flip this to true, once a (preview) track has been acquired successfully with the appropriate permissions. |
+| [tracks?](./react/mediadevicemenuprops.tracks.md)                             | Partial&lt;Record&lt;MediaDeviceKind, LocalAudioTrack \| LocalVideoTrack \| undefined&gt;&gt; | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |

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

@@ -0,0 +1,34 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# MediaDeviceSelect (component)
+
+The MediaDeviceSelect list all media devices of one kind. Clicking on one of the listed devices make it the active media device.
+
+## Import
+
+```typescript
+import { MediaDeviceSelect } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <MediaDeviceSelect kind="audioinput" />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                                        | Type                                      | Description                                                                                                                                                                                                                                                                                                                                              |
+| ------------------------------------------------------------------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [exactMatch?](./react/mediadeviceselectprops.exactmatch.md)                     | boolean                                   | _(Optional)_ will force the browser to only return the specified device will call <code>onDeviceSelectError</code> with the error in case this fails                                                                                                                                                                                                     |
+| [initialSelection?](./react/mediadeviceselectprops.initialselection.md)         | string                                    | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |
+| [kind](./react/mediadeviceselectprops.kind.md)                                  | MediaDeviceKind                           |                                                                                                                                                                                                                                                                                                                                                          |
+| [onActiveDeviceChange?](./react/mediadeviceselectprops.onactivedevicechange.md) | (deviceId: string) =&gt; void             | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |
+| [onDeviceListChange?](./react/mediadeviceselectprops.ondevicelistchange.md)     | (devices: MediaDeviceInfo\[\]) =&gt; void | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |
+| [onDeviceSelectError?](./react/mediadeviceselectprops.ondeviceselecterror.md)   | (e: Error) =&gt; void                     | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |
+| [requestPermissions?](./react/mediadeviceselectprops.requestpermissions.md)     | boolean                                   | _(Optional)_ this will call getUserMedia if the permissions are not yet given to enumerate the devices with device labels. in some browsers multiple calls to getUserMedia result in multiple permission prompts. It's generally advised only flip this to true, once a (preview) track has been acquired successfully with the appropriate permissions. |
+| [track?](./react/mediadeviceselectprops.track.md)                               | LocalAudioTrack \| LocalVideoTrack        | _(Optional)_                                                                                                                                                                                                                                                                                                                                             |

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

@@ -0,0 +1,29 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantAudioTile (component)
+
+The ParticipantAudioTile component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the `TileLoop` or independently if a participant is passed as a property.
+
+## Import
+
+```typescript
+import { ParticipantAudioTile } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<ParticipantAudioTile />
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                                              | Type                                                                                 | Description  |
+| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------ |
+| [disableSpeakingIndicator?](./react/participanttileprops.disablespeakingindicator.md) | boolean                                                                              | _(Optional)_ |
+| [onParticipantClick?](./react/participanttileprops.onparticipantclick.md)             | (event: [ParticipantClickEvent](./core/participantclickevent.md)<!-- -->) =&gt; void | _(Optional)_ |
+| [participant?](./react/participanttileprops.participant.md)                           | Participant                                                                          | _(Optional)_ |
+| [publication?](./react/participanttileprops.publication.md)                           | TrackPublication                                                                     | _(Optional)_ |
+| [source?](./react/participanttileprops.source.md)                                     | Track.Source                                                                         | _(Optional)_ |

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantContextIfNeeded (component)
+
+## Import
+
+```typescript
+import { ParticipantContextIfNeeded } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" /%}

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

@@ -0,0 +1,33 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantLoop (component)
+
+The ParticipantLoop component loops over an array of participants to create a context for every participant. This component takes exactly one child component as a template. By providing your own template as a child you have full control over the look and feel of your participant representations.
+
+## Import
+
+```typescript
+import { ParticipantLoop } from '@livekit/components-react';
+```
+
+## Remarks
+
+If you want to loop over individual tracks instead of participants, you can use the `TrackLoop` component.
+
+## Usage
+
+```tsx
+const participants = useParticipants();
+<ParticipantLoop participants={participants}>
+  <ParticipantName />
+<ParticipantLoop />
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                     | Type            | Description                                                                                              |
+| ------------------------------------------------------------ | --------------- | -------------------------------------------------------------------------------------------------------- |
+| [children](./react/participantloopprops.children.md)         | React.ReactNode | The template component to be used in the loop.                                                           |
+| [participants](./react/participantloopprops.participants.md) | Participant\[\] | The participants to loop over. If not provided, the participants from the current room context are used. |

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

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantName (component)
+
+The ParticipantName component displays the name of the participant as a string within an HTML span element. If no participant name is undefined the participant identity string is displayed.
+
+## Import
+
+```typescript
+import { ParticipantName } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<ParticipantName />
+```
+
+{% partial file="p_usage.md" /%}