@livekit/components-js-docs 0.0.4 → 0.1.0

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

@@ -2,13 +2,25 @@
 
 # usePinnedTracks
 
+The `usePinnedTracks` hook returns a array of the pinned tracks of the current room.
+
 ## Import
 
 ```typescript
 import { usePinnedTracks } from '@livekit/components-react';
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+## Remarks
+
+To function properly, this hook must be called within a `LayoutContext`<!-- -->.
+
+## Usage
+
+```tsx
+const pinnedTracks = usePinnedTracks();
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
 ## Parameters
 
@@ -17,4 +29,6 @@ import { usePinnedTracks } from '@livekit/components-react';
 
 ## Returns
 
-`TrackReferenceOrPlaceholder[]`
+```typescript
+TrackReferenceOrPlaceholder[]
+```

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

@@ -23,4 +23,10 @@ import { usePreviewDevice } from '@livekit/components-react';
 
 ## Returns
 
-`{     selectedDevice: MediaDeviceInfo | undefined;     localTrack: T | undefined;     deviceError: Error | null; }`
+```typescript
+{
+  selectedDevice: MediaDeviceInfo | undefined;
+  localTrack: T | undefined;
+  deviceError: Error | null;
+}
+```

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

@@ -2,13 +2,25 @@
 
 # useRemoteParticipant
 
+The `useRemoteParticipant` hook returns the RemoteParticipant with the given `identity`<!-- -->.
+
 ## Import
 
 ```typescript
 import { useRemoteParticipant } from '@livekit/components-react';
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+## Remarks
+
+To optimize performance, you can use the `updateOnlyOn` property to decide on what `ParticipantEvents` the hook updates.
+
+## Usage
+
+```tsx
+const participant = useRemoteParticipant('Russ');
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
 ## Parameters
 
@@ -20,4 +32,6 @@ import { useRemoteParticipant } from '@livekit/components-react';
 
 ## Returns
 
-`RemoteParticipant | undefined`
+```typescript
+RemoteParticipant | undefined;
+```

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

@@ -2,7 +2,7 @@
 
 # useRemoteParticipants
 
-The useRemoteParticipants
+The `useRemoteParticipants` hook returns all remote participants (without the local) of the current room.
 
 ## Import
 
@@ -10,7 +10,20 @@ The useRemoteParticipants
 import { useRemoteParticipants } from '@livekit/components-react';
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+## Remarks
+
+To optimize performance, you can use the `updateOnlyOn` property to decide on what `RoomEvents` the hook updates.
+
+## Usage
+
+```tsx
+const participants = useRemoteParticipants();
+<ParticipantLoop participants={participants}>
+  <ParticipantName />
+</ParticipantLoop>;
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
 ## Parameters
 
@@ -19,4 +32,6 @@ import { useRemoteParticipants } from '@livekit/components-react';
 
 ## Returns
 
-`RemoteParticipant[]`
+```typescript
+RemoteParticipant[]
+```

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

@@ -14,4 +14,6 @@ import { useRoomContext } from '@livekit/components-react';
 
 ## Returns
 
-`Room`
+```typescript
+Room;
+```

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

@@ -17,4 +17,9 @@ import { useRoomInfo } from '@livekit/components-react';
 
 ## Returns
 
-`{     name: string;     metadata: string | undefined; }`
+```typescript
+{
+  name: string;
+  metadata: string | undefined;
+}
+```

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

@@ -2,7 +2,7 @@
 
 # useSortedParticipants
 
-The useSortedParticipants hook returns the only the active speakers of all participants.
+The `useSortedParticipants` hook returns the participants sorted by importance.
 
 ## Import
 
@@ -19,4 +19,6 @@ import { useSortedParticipants } from '@livekit/components-react';
 
 ## Returns
 
-`Participant[]`
+```typescript
+Participant[]
+```

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

@@ -2,7 +2,7 @@
 
 # useSpeakingParticipants
 
-The useSpeakingParticipants hook returns the only the active speakers of all participants.
+The `useSpeakingParticipants` hook returns the only the active speakers of all participants.
 
 ## Import
 
@@ -10,8 +10,16 @@ The useSpeakingParticipants hook returns the only the active speakers of all par
 import { useSpeakingParticipants } from '@livekit/components-react';
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+## Usage
+
+```tsx
+const activeSpeakers = useSpeakingParticipants();
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
 ## Returns
 
-`import("livekit-client").Participant[]`
+```typescript
+import("livekit-client").Participant[]
+```

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

@@ -2,13 +2,21 @@
 
 # useToken
 
+The `useToken` hook fetches a token from the given token endpoint with the given user info.
+
 ## Import
 
 ```typescript
 import { useToken } from '@livekit/components-react';
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+## Usage
+
+```tsx
+const token = useToken(<token-endpoint>, roomName, { userInfo: { identity, name }});
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
 ## Parameters
 
@@ -23,4 +31,6 @@ import { useToken } from '@livekit/components-react';
 
 ## Returns
 
-`string | undefined`
+```typescript
+string | undefined;
+```

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

@@ -0,0 +1,31 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useTrack
+
+## Import
+
+```typescript
+import { useTrack } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+
+## Parameters
+
+{% parameter name="trackRef" type="TrackIdentifier" optional=false %}
+{% /parameter %}
+
+{% parameter name="options" type="UseTrackOptions" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  publication: import('livekit-client').TrackPublication | undefined;
+  isMuted: boolean | undefined;
+  isSubscribed: boolean | undefined;
+  track: import('livekit-client').Track | undefined;
+  elementProps: React.HTMLAttributes<HTMLElement>;
+}
+```

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

@@ -0,0 +1,31 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useTrackByName
+
+## Import
+
+```typescript
+import { useTrackByName } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+
+## Parameters
+
+{% parameter name="options" type="UseMediaTrackOptions" optional=true %}
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+{
+  publication: import('livekit-client').TrackPublication | undefined;
+  isMuted: boolean | undefined;
+  isSubscribed: boolean | undefined;
+  track: import('livekit-client').Track | undefined;
+  elementProps: import('react').HTMLAttributes<HTMLElement>;
+}
+```

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

@@ -2,7 +2,11 @@
 
 # useTrackContext
 
-Ensures that a track reference is provided via context. If not inside a `TrackContext`<!-- -->, an error is thrown.
+> Warning: This API is now obsolete.
+>
+> `useTrackContext` has been to `useTrackRefContext`<!-- -->, use this as a drop in replacement.
+
+Ensures that a track reference is provided via context. If not inside a `TrackRefContext`<!-- -->, an error is thrown.
 
 ## Import
 
@@ -14,4 +18,6 @@ import { useTrackContext } from '@livekit/components-react';
 
 ## Returns
 
-`TrackReferenceOrPlaceholder`
+```typescript
+TrackReferenceOrPlaceholder;
+```

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

@@ -2,22 +2,29 @@
 
 # useTrackMutedIndicator
 
+The `useTrackMutedIndicator` hook is used to implement the `TrackMutedIndicator` component and returns the muted state of the given track.
+
 ## Import
 
 ```typescript
 import { useTrackMutedIndicator } from '@livekit/components-react';
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+## Usage
 
-## Parameters
+```tsx
+const { isMuted } = useTrackMutedIndicator(trackRef);
+```
 
-{% parameter name="source" type="Track.Source" optional=false %}
-{% /parameter %}
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
-{% parameter name="options" type="UseTrackMutedIndicatorOptions" optional=true %}
+## Parameters
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
 {% /parameter %}
 
 ## Returns
 
-`{     isMuted: boolean;     className: string; }`
+```typescript
+TrackMutedIndicatorReturnType;
+```

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

@@ -0,0 +1,29 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useTrackMutedIndicator
+
+> Warning: This API is now obsolete.
+>
+> This overload will be removed in a future version, pass in trackRef instead.
+
+## Import
+
+```typescript
+import { useTrackMutedIndicator } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+
+## Parameters
+
+{% parameter name="source" type="Track.Source" optional=false %}
+{% /parameter %}
+
+{% parameter name="options" type="UseTrackMutedIndicatorOptions" optional=true %}
+{% /parameter %}
+
+## Returns
+
+```typescript
+TrackMutedIndicatorReturnType;
+```

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

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# useTrackRefContext
+
+Ensures that a track reference is provided via context. If not inside a `TrackRefContext`<!-- -->, an error is thrown.
+
+## Import
+
+```typescript
+import { useTrackRefContext } from '@livekit/components-react';
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+
+## Returns
+
+```typescript
+TrackReferenceOrPlaceholder;
+```

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

@@ -39,4 +39,6 @@ const trackReferencesWithPlaceholders: TrackReferenceOrPlaceholder[] = useTracks
 
 ## Returns
 
-`UseTracksHookReturnType<T>`
+```typescript
+UseTracksHookReturnType<T>;
+```

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

@@ -2,13 +2,22 @@
 
 # useTrackToggle
 
+The `useTrackToggle` hook is used to implement the `TrackToggle` component and returns state and functionality of the given track.
+
 ## Import
 
 ```typescript
 import { useTrackToggle } from '@livekit/components-react';
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+## Usage
+
+```tsx
+const { buttonProps, enabled } = useTrackToggle(trackRef);
+return <button {...buttonProps}>{enabled ? 'disable' : 'enable'}</button>;
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
 ## Parameters
 
@@ -17,4 +26,12 @@ import { useTrackToggle } from '@livekit/components-react';
 
 ## Returns
 
-`{     toggle: ((forceState?: boolean | undefined) => void) | ((forceState?: boolean | undefined, captureOptions?: import("@livekit/components-core").CaptureOptionsBySource<T> | undefined) => Promise<void>);     enabled: boolean;     pending: boolean;     track: import("livekit-client").LocalTrackPublication | undefined;     buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>; }`
+```typescript
+{
+    toggle: ((forceState?: boolean | undefined) => void) | ((forceState?: boolean | undefined, captureOptions?: import("@livekit/components-core").CaptureOptionsBySource<T> | undefined) => Promise<void>);
+    enabled: boolean;
+    pending: boolean;
+    track: import("livekit-client").LocalTrackPublication | undefined;
+    buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+```

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

@@ -2,11 +2,7 @@
 
 # useVisualStableUpdate
 
-> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
-
-The useVisualStableUpdate hook tries to keep visual updates of the TackBundles array to a minimum, while still trying to display important tiles such as speaking participants or screen shares.
-
-Updating works with pagination. For example, if a participant starts speaking on the second page, they will be moved to the first page by replacing the least active/interesting participant on the first page.
+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.
 
 ## Import
 
@@ -14,7 +10,18 @@ Updating works with pagination. For example, if a participant starts speaking on
 import { useVisualStableUpdate } from '@livekit/components-react';
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+## Remarks
+
+The hook is used for the `GridLayout` and `CarouselLayout` components.
+
+## Usage
+
+```tsx
+const trackRefs = useTracks();
+const updatedTrackRefs = useVisualStableUpdate(trackRefs, itemPerPage);
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
 ## Parameters
 
@@ -29,4 +36,6 @@ import { useVisualStableUpdate } from '@livekit/components-react';
 
 ## Returns
 
-`TrackReferenceOrPlaceholder[]`
+```typescript
+TrackReferenceOrPlaceholder[]
+```