@livekit/components-js-docs 0.0.2

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

@@ -0,0 +1,31 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ParticipantTile (component)
+
+The ParticipantTile component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the `TrackLoop` component or by spreading a track reference as properties.
+
+## Import
+
+```typescript
+import { ParticipantTile } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<ParticipantTile source={Track.Source.Camera} />
+
+<ParticipantTile {...trackReference} />
+```
+
+{% 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/prejoin.md

@@ -0,0 +1,37 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# PreJoin (prefab)
+
+The PreJoin prefab component is normally presented to the user before he enters a room. This component allows the user to check and select the preferred media device (camera und microphone). On submit the user decisions are returned, which can then be passed on to the LiveKitRoom so that the user enters the room with the correct media devices.
+
+## Import
+
+```typescript
+import { PreJoin } from '@livekit/components-react';
+```
+
+## Remarks
+
+This component is independent from the LiveKitRoom component and don't has to be nested inside it. Because it only access the local media tracks this component is self contained and works without connection to the LiveKit server.
+
+## Usage
+
+```tsx
+<PreJoin />
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                             | Type                                                                            | Description                                                                                                                                |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| [camLabel?](./react/prejoinprops.camlabel.md)        | string                                                                          | _(Optional)_                                                                                                                               |
+| [debug?](./react/prejoinprops.debug.md)              | boolean                                                                         | _(Optional)_ Display a debug window for your convenience.                                                                                  |
+| [defaults?](./react/prejoinprops.defaults.md)        | Partial&lt;[LocalUserChoices](./react/localuserchoices.md)<!-- -->&gt;          | _(Optional)_ Prefill the input form with initial values.                                                                                   |
+| [joinLabel?](./react/prejoinprops.joinlabel.md)      | string                                                                          | _(Optional)_                                                                                                                               |
+| [micLabel?](./react/prejoinprops.miclabel.md)        | string                                                                          | _(Optional)_                                                                                                                               |
+| [onError?](./react/prejoinprops.onerror.md)          | (error: Error) =&gt; void                                                       | _(Optional)_                                                                                                                               |
+| [onSubmit?](./react/prejoinprops.onsubmit.md)        | (values: [LocalUserChoices](./react/localuserchoices.md)<!-- -->) =&gt; void    | _(Optional)_ This function is called with the <code>LocalUserChoices</code> if validation is passed.                                       |
+| [onValidate?](./react/prejoinprops.onvalidate.md)    | (values: [LocalUserChoices](./react/localuserchoices.md)<!-- -->) =&gt; boolean | _(Optional)_ Provide your custom validation function. Only if validation is successful the user choices are past to the onSubmit callback. |
+| [userLabel?](./react/hook/prejoinprops.userlabel.md) | string                                                                          | _(Optional)_                                                                                                                               |

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

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# RoomAudioRenderer (component)
+
+The RoomAudioRenderer component is a drop-in solution for adding audio to your LiveKit app. It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
+
+## Import
+
+```typescript
+import { RoomAudioRenderer } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <RoomAudioRenderer />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}

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

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# RoomName (component)
+
+The RoomName component renders the name of the connected LiveKit room inside a span tag.
+
+## Import
+
+```typescript
+import { RoomName } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <RoomName />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                       | Type                | Description  |
+| -------------------------------------------------------------- | ------------------- | ------------ |
+| [childrenPosition?](./react/roomnameprops.childrenposition.md) | 'before' \| 'after' | _(Optional)_ |

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

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# StartAudio (component)
+
+The StartAudio component is only visible when the browser blocks audio playback. This is due to some browser implemented autoplay policies. To start audio playback, the user must perform a user-initiated event such as clicking this button. As soon as audio playback starts, the button hides itself again.
+
+## Import
+
+```typescript
+import { StartAudio } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <StartAudio label="Click to allow audio playback" />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                          | Type   | Description |
+| ------------------------------------------------- | ------ | ----------- |
+| [label](./react/allowaudioplaybackprops.label.md) | string |             |

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

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

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

@@ -0,0 +1,31 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# TrackLoop (component)
+
+The TrackLoop component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks. TrackLoop creates a TrackContext for each track that you can use to e.g. render the track.
+
+## Import
+
+```typescript
+import { TrackLoop } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+const tracks = useTracks([Track.Source.Camera]);
+<TrackLoop tracks={tracks} >
+ <TrackContext.Consumer>
+   {(track) => track && <VideoTrack {...track}/>}
+ </TrackContext.Consumer>
+<TrackLoop />
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                       | Type                                                                                                                                       | Description                                    |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- |
+| [children](./react/trackloopprops.children.md) | React.ReactNode                                                                                                                            | The template component to be used in the loop. |
+| [tracks](./react/trackloopprops.tracks.md)     | [TrackReference](./core/trackreference.md)<!-- -->\[\] \| [TrackReferenceOrPlaceholder](./core/trackreferenceorplaceholder.md)<!-- -->\[\] | Track references to loop over.                 |

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

@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# TrackMutedIndicator (component)
+
+The TrackMutedIndicator shows whether the participant's camera or microphone is muted or not.
+
+## Import
+
+```typescript
+import { TrackMutedIndicator } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<TrackMutedIndicator source={Track.Source.Camera} />
+<TrackMutedIndicator source={Track.Source.Microphone} />
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                        | Type                             | Description  |
+| --------------------------------------------------------------- | -------------------------------- | ------------ |
+| [participant?](./react/trackmutedindicatorprops.participant.md) | Participant                      | _(Optional)_ |
+| [show?](./react/trackmutedindicatorprops.show.md)               | 'always' \| 'muted' \| 'unmuted' | _(Optional)_ |
+| [source](./react/trackmutedindicatorprops.source.md)            | Track.Source                     |              |

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

@@ -0,0 +1,32 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# TrackToggle (component)
+
+With the TrackToggle component it is possible to mute and unmute your camera and microphone. The component uses an html button element under the hood so you can treat it like a button.
+
+## Import
+
+```typescript
+import { TrackToggle } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <TrackToggle source={Track.Source.Microphone} />
+  <TrackToggle source={Track.Source.Camera} />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                      | Type                                                                        | Description  |
+| ------------------------------------------------------------- | --------------------------------------------------------------------------- | ------------ |
+| [captureOptions?](./react/tracktoggleprops.captureoptions.md) | [CaptureOptionsBySource](./core/captureoptionsbysource.md)<!-- -->&lt;T&gt; | _(Optional)_ |
+| [initialState?](./react/tracktoggleprops.initialstate.md)     | boolean                                                                     | _(Optional)_ |
+| [onChange?](./react/tracktoggleprops.onchange.md)             | (enabled: boolean) =&gt; void                                               | _(Optional)_ |
+| [showIcon?](./react/tracktoggleprops.showicon.md)             | boolean                                                                     | _(Optional)_ |
+| [source](./react/tracktoggleprops.source.md)                  | T                                                                           |              |

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

@@ -0,0 +1,31 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# VideoConference (prefab)
+
+This component is the default setup of a classic LiveKit video conferencing app. It provides functionality like switching between participant grid view and focus view.
+
+## Import
+
+```typescript
+import { VideoConference } from '@livekit/components-react';
+```
+
+## Remarks
+
+The component is implemented with other LiveKit components like `FocusContextProvider`<!-- -->, `GridLayout`<!-- -->, `ControlBar`<!-- -->, `FocusLayoutContainer` and `FocusLayout`<!-- -->.
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <VideoConference />
+<LiveKitRoom>
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                                      | Type                                            | Description  |
+| ----------------------------------------------------------------------------- | ----------------------------------------------- | ------------ |
+| [chatMessageFormatter?](./react/videoconferenceprops.chatmessageformatter.md) | [MessageFormatter](./react/messageformatter.md) | _(Optional)_ |

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

@@ -0,0 +1,30 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# VideoTrack (component)
+
+The VideoTrack component is responsible for rendering participant video tracks like `camera` and `screen_share`<!-- -->. This component must have access to the participant's context, or alternatively pass it a `Participant` as a property.
+
+## Import
+
+```typescript
+import { VideoTrack } from '@livekit/components-react';
+```
+
+## Usage
+
+```tsx
+<VideoTrack source={Track.Source.Camera} />
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                                               | Type                                                                               | Description  |
+| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------ |
+| [name?](./react/videotrackprops.name.md)                                               | string                                                                             | _(Optional)_ |
+| [onSubscriptionStatusChanged?](./react/videotrackprops.onsubscriptionstatuschanged.md) | (subscribed: boolean) =&gt; void                                                   | _(Optional)_ |
+| [onTrackClick?](./react/videotrackprops.ontrackclick.md)                               | (evt: [ParticipantClickEvent](./core/participantclickevent.md)<!-- -->) =&gt; void | _(Optional)_ |
+| [participant?](./react/videotrackprops.participant.md)                                 | Participant                                                                        | _(Optional)_ |
+| [publication?](./react/videotrackprops.publication.md)                                 | TrackPublication                                                                   | _(Optional)_ |
+| [source](./react/videotrackprops.source.md)                                            | Track.Source                                                                       |              |

package/generated-docs/react/connectionqualityindicatoroptions.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ConnectionQualityIndicatorOptions interface
+
+**Signature:**
+
+```typescript
+export interface ConnectionQualityIndicatorOptions
+```
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                                 | Type        | Description  |
+| ------------------------------------------------------------------------ | ----------- | ------------ |
+| [participant?](./react/connectionqualityindicatoroptions.participant.md) | Participant | _(Optional)_ |

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

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ConnectionQualityIndicatorOptions.participant property
+
+**Signature:**
+
+```typescript
+participant?: Participant;
+```

package/generated-docs/react/connectionqualityindicatorprops.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ConnectionQualityIndicatorProps interface
+
+**Signature:**
+
+```typescript
+export interface ConnectionQualityIndicatorProps extends React.HTMLAttributes<HTMLDivElement>, ConnectionQualityIndicatorOptions
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;, [ConnectionQualityIndicatorOptions](./react/connectionqualityindicatoroptions.md)
+
+{% partial file="p_usage.md" /%}

package/generated-docs/react/connectionstatetoastprops.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ConnectionStateToastProps interface
+
+**Signature:**
+
+```typescript
+export interface ConnectionStateToastProps extends React.HTMLAttributes<HTMLDivElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                           | Type | Description  |
+| -------------------------------------------------- | ---- | ------------ |
+| [room?](./react/connectionstatetoastprops.room.md) | Room | _(Optional)_ |

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

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ConnectionStateToastProps.room property
+
+**Signature:**
+
+```typescript
+room?: Room;
+```

package/generated-docs/react/connectionstatusprops.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ConnectionStatusProps interface
+
+**Signature:**
+
+```typescript
+export interface ConnectionStatusProps extends React.HTMLAttributes<HTMLDivElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;
+
+{% 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/connectionstatusprops.room.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ConnectionStatusProps.room property
+
+The room from which the connection status should be displayed.
+
+**Signature:**
+
+```typescript
+room?: Room;
+```
+
+{% partial file="p_usage.md" /%}

package/generated-docs/react/controlbarcontrols.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ControlBarControls type
+
+**Signature:**
+
+```typescript
+export type ControlBarControls = {
+  microphone?: boolean;
+  camera?: boolean;
+  chat?: boolean;
+  screenShare?: boolean;
+  leave?: boolean;
+};
+```
+
+{% partial file="p_usage.md" /%}

package/generated-docs/react/controlbarprops.controls.md

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ControlBarProps.controls property
+
+**Signature:**
+
+```typescript
+controls?: ControlBarControls;
+```

package/generated-docs/react/controlbarprops.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ControlBarProps interface
+
+**Signature:**
+
+```typescript
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;
+
+{% 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/controlbarprops.variation.md

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## ControlBarProps.variation property
+
+**Signature:**
+
+```typescript
+variation?: 'minimal' | 'verbose' | 'textOnly';
+```

package/generated-docs/react/disconnectbuttonprops.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## DisconnectButtonProps interface
+
+**Signature:**
+
+```typescript
+export interface DisconnectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
+```
+
+**Extends:** React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;
+
+{% partial file="p_usage.md" /%}
+
+## Properties
+
+| Property                                                   | Type    | Description  |
+| ---------------------------------------------------------- | ------- | ------------ |
+| [stopTracks?](./react/disconnectbuttonprops.stoptracks.md) | boolean | _(Optional)_ |

package/generated-docs/react/disconnectbuttonprops.stoptracks.md

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## DisconnectButtonProps.stopTracks property
+
+**Signature:**
+
+```typescript
+stopTracks?: boolean;
+```

package/generated-docs/react/focuslayoutcontainerprops.focustrack.md

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## FocusLayoutContainerProps.focusTrack property
+
+**Signature:**
+
+```typescript
+focusTrack?: TrackReference;
+```

package/generated-docs/react/focuslayoutcontainerprops.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## FocusLayoutContainerProps interface
+
+**Signature:**
+
+```typescript
+export interface FocusLayoutContainerProps extends React.HTMLAttributes<HTMLDivElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLDivElement&gt;
+
+{% 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/focuslayoutcontainerprops.participants.md

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## FocusLayoutContainerProps.participants property
+
+**Signature:**
+
+```typescript
+participants?: Array<Participant>;
+```

package/generated-docs/react/focuslayoutprops.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## FocusLayoutProps interface
+
+**Signature:**
+
+```typescript
+export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement>
+```
+
+**Extends:** React.HTMLAttributes&lt;HTMLElement&gt;
+
+{% 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/focuslayoutprops.onparticipantclick.md

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## FocusLayoutProps.onParticipantClick property
+
+**Signature:**
+
+```typescript
+onParticipantClick?: (evt: ParticipantClickEvent) => void;
+```

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

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## FocusLayoutProps.track property
+
+**Signature:**
+
+```typescript
+track?: TrackReferenceOrPlaceholder;
+```

package/generated-docs/react/focustoggleprops.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## FocusToggleProps interface
+
+**Signature:**
+
+```typescript
+export interface FocusToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
+```
+
+**Extends:** React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt;
+
+{% 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/focustoggleprops.participant.md

@@ -0,0 +1,9 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+## FocusToggleProps.participant property
+
+**Signature:**
+
+```typescript
+participant?: Participant;
+```