Skip to content

Commit efc4b11

Browse files
mayankofficial999mayankofficial999
committed
docs(realtimekit): added React Native RealtimeKit UI component references
1 parent 740cd36 commit efc4b11

File tree

74 files changed

+3164
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+3164
-0
lines changed

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAudioVisualizer.mdx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkAudioVisualizer
4+
description: API reference for RtkAudioVisualizer component (React Native Library)
5+
---
6+
7+
Displays an audio visualizer with animated bars representing a participant's audio levels.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| --------------- | ------------------------------ | -------- | ----------------- | ---------------------------------------------- |
13+
| `participant` | `Peer \| RTKParticipant` | ✅ | - | The participant whose audio to visualize |
14+
| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack for icons |
15+
| `isScreenshare` | `boolean` | ❌ | `false` | Whether this is a screenshare audio visualizer |
16+
| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size of the visualizer |
17+
| `variant` | `'bar'` | ❌ | `'bar'` | Visual variant of the visualizer |
18+
19+
## Usage Examples
20+
21+
### Basic Usage
22+
23+
```tsx
24+
import { RtkAudioVisualizer } from "@cloudflare/realtimekit-react-native-ui";
25+
26+
function MyComponent() {
27+
return <RtkAudioVisualizer participant={participant} />;
28+
}
29+
```
30+
31+
### With Properties
32+
33+
```tsx
34+
import { RtkAudioVisualizer } from "@cloudflare/realtimekit-react-native-ui";
35+
36+
function MyComponent() {
37+
return (
38+
<RtkAudioVisualizer participant={participant} size="md" variant="bar" />
39+
);
40+
}
41+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAvatar.mdx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkAvatar
4+
description: API reference for RtkAvatar component (React Native Library)
5+
---
6+
7+
Displays a participant's avatar image or initials-based fallback avatar.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ------------- | ------------------------------------- | -------- | ----------------- | --------------------------------------- |
13+
| `participant` | `RTKParticipant \| RTKSelf` | ✅ | - | The participant whose avatar to display |
14+
| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack |
15+
| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size of the avatar |
16+
| `variant` | `'circular' \| 'hexagon' \| 'square'` | ❌ | `'circular'` | Shape variant of the avatar |
17+
18+
## Usage Examples
19+
20+
### Basic Usage
21+
22+
```tsx
23+
import { RtkAvatar } from "@cloudflare/realtimekit-react-native-ui";
24+
25+
function MyComponent() {
26+
return <RtkAvatar participant={participant} />;
27+
}
28+
```
29+
30+
### With Properties
31+
32+
```tsx
33+
import { RtkAvatar } from "@cloudflare/realtimekit-react-native-ui";
34+
35+
function MyComponent() {
36+
return <RtkAvatar participant={participant} size="lg" variant="circular" />;
37+
}
38+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkButton.mdx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkButton
4+
description: API reference for RtkButton component (React Native Library)
5+
---
6+
7+
A general-purpose button component with multiple variants and sizes.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ---------- | ------------------------------------------------- | -------- | ---------- | -------------------------------- |
13+
| `children` | `ReactNode` | ❌ | - | Button content/label |
14+
| `onClick` | `any` | ✅ | - | Press handler callback |
15+
| `kind` | `'button' \| 'icon' \| 'wide'` | ❌ | `'button'` | Button kind |
16+
| `variant` | `'danger' \| 'ghost' \| 'primary' \| 'secondary'` | ❌ | - | Visual style variant |
17+
| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Button size |
18+
| `reverse` | `boolean` | ❌ | `false` | Reverse the button content order |
19+
| `disabled` | `boolean` | ❌ | - | Whether the button is disabled |
20+
| `style` | `StyleProp<any>` | ❌ | - | Custom React Native styles |
21+
22+
## Usage Examples
23+
24+
### Basic Usage
25+
26+
```tsx
27+
import { RtkButton } from "@cloudflare/realtimekit-react-native-ui";
28+
29+
function MyComponent() {
30+
return <RtkButton onClick={() => console.log("pressed")}>Press Me</RtkButton>;
31+
}
32+
```
33+
34+
### With Properties
35+
36+
```tsx
37+
import { RtkButton } from "@cloudflare/realtimekit-react-native-ui";
38+
39+
function MyComponent() {
40+
return (
41+
<RtkButton
42+
onClick={() => console.log("pressed")}
43+
variant="primary"
44+
size="md"
45+
kind="wide"
46+
>
47+
Join Meeting
48+
</RtkButton>
49+
);
50+
}
51+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkCameraToggle.mdx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkCameraToggle
4+
description: API reference for RtkCameraToggle component (React Native Library)
5+
---
6+
7+
Toggle button to enable or disable the local participant's camera. Automatically hides if the participant lacks video production permissions.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- |
13+
| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance |
14+
| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size |
15+
| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant |
16+
| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack |
17+
| `t` | `RtkI18n` | ❌ | - | i18n translation function |
18+
19+
## Usage Examples
20+
21+
### Basic Usage
22+
23+
```tsx
24+
import { RtkCameraToggle } from "@cloudflare/realtimekit-react-native-ui";
25+
26+
function MyComponent() {
27+
return <RtkCameraToggle meeting={meeting} />;
28+
}
29+
```
30+
31+
### With Properties
32+
33+
```tsx
34+
import { RtkCameraToggle } from "@cloudflare/realtimekit-react-native-ui";
35+
36+
function MyComponent() {
37+
return <RtkCameraToggle meeting={meeting} size="md" variant="button" />;
38+
}
39+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChat.mdx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkChat
4+
description: API reference for RtkChat component (React Native Library)
5+
---
6+
7+
Full chat interface with message list, text input, image/file upload support, and pinned messages.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- |
13+
| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance |
14+
| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object |
15+
| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack |
16+
| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant |
17+
| `t` | `RtkI18n` | ❌ | - | i18n translation function |
18+
19+
## Usage Examples
20+
21+
### Basic Usage
22+
23+
```tsx
24+
import { RtkChat } from "@cloudflare/realtimekit-react-native-ui";
25+
26+
function MyComponent() {
27+
return <RtkChat meeting={meeting} />;
28+
}
29+
```
30+
31+
### With Properties
32+
33+
```tsx
34+
import { RtkChat } from "@cloudflare/realtimekit-react-native-ui";
35+
36+
function MyComponent() {
37+
return <RtkChat meeting={meeting} size="md" config={customConfig} />;
38+
}
39+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChatToggle.mdx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkChatToggle
4+
description: API reference for RtkChatToggle component (React Native Library)
5+
---
6+
7+
Toggle button to open the chat sidebar panel. Hides if chat permissions are not available.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ---------- | ------------------------------ | -------- | ------- | -------------------------------- |
13+
| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance |
14+
| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size |
15+
| `states` | `States` | ❌ | - | UI state object |
16+
| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant |
17+
| `iconPack` | `IconPack` | ❌ | - | Custom icon pack |
18+
| `t` | `RtkI18n` | ❌ | - | i18n translation function |
19+
20+
## Usage Examples
21+
22+
### Basic Usage
23+
24+
```tsx
25+
import { RtkChatToggle } from "@cloudflare/realtimekit-react-native-ui";
26+
27+
function MyComponent() {
28+
return <RtkChatToggle meeting={meeting} />;
29+
}
30+
```
31+
32+
### With Properties
33+
34+
```tsx
35+
import { RtkChatToggle } from "@cloudflare/realtimekit-react-native-ui";
36+
37+
function MyComponent() {
38+
return <RtkChatToggle meeting={meeting} size="md" variant="button" />;
39+
}
40+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkClock.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkClock
4+
description: API reference for RtkClock component (React Native Library)
5+
---
6+
7+
Displays elapsed meeting time as a running clock (HH:MM:SS or MM:SS).
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ---------- | ------------------- | -------- | ----------------- | -------------------------------- |
13+
| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance |
14+
| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack |
15+
| `t` | `RtkI18n` | ❌ | - | i18n translation function |
16+
17+
## Usage Examples
18+
19+
### Basic Usage
20+
21+
```tsx
22+
import { RtkClock } from "@cloudflare/realtimekit-react-native-ui";
23+
24+
function MyComponent() {
25+
return <RtkClock meeting={meeting} />;
26+
}
27+
```
28+
29+
### With Properties
30+
31+
```tsx
32+
import { RtkClock } from "@cloudflare/realtimekit-react-native-ui";
33+
34+
function MyComponent() {
35+
return <RtkClock meeting={meeting} iconPack={customIconPack} />;
36+
}
37+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbar.mdx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkControlbar
4+
description: API reference for RtkControlbar component (React Native Library)
5+
---
6+
7+
The main control bar container that renders meeting controls (mic, camera, leave, and more) using the declarative UI config system.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ---------- | ------------------------------ | -------- | --------------- | -------------------------------- |
13+
| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance |
14+
| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object |
15+
| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant |
16+
| `variant` | `'boxed' \| 'solid'` | ❌ | `'solid'` | Visual style variant |
17+
| `iconPack` | `IconPack` | ❌ | - | Custom icon pack |
18+
| `states` | `States` | ❌ | - | UI state object |
19+
| `t` | `RtkI18n` | ❌ | - | i18n translation function |
20+
21+
## Usage Examples
22+
23+
### Basic Usage
24+
25+
```tsx
26+
import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui";
27+
28+
function MyComponent() {
29+
return <RtkControlbar meeting={meeting} />;
30+
}
31+
```
32+
33+
### With Properties
34+
35+
```tsx
36+
import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui";
37+
38+
function MyComponent() {
39+
return (
40+
<RtkControlbar
41+
meeting={meeting}
42+
variant="solid"
43+
size="md"
44+
config={customConfig}
45+
/>
46+
);
47+
}
48+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbarButton.mdx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkControlbarButton
4+
description: API reference for RtkControlbarButton component (React Native Library)
5+
---
6+
7+
A reusable button for the control bar with icon, label, loading state, and warning indicator support.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ------------- | ------------------------------ | -------- | ----------------- | ------------------------------------ |
13+
| `label` | `string` | ✅ | `' '` | Button label text |
14+
| `icon` | `string` | ✅ | - | SVG icon string |
15+
| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack |
16+
| `isLoading` | `boolean` | ❌ | `false` | Show loading spinner instead of icon |
17+
| `disabled` | `boolean` | ❌ | `false` | Whether the button is disabled |
18+
| `onClick` | `() => void` | ❌ | - | Press handler callback |
19+
| `showWarning` | `boolean` | ❌ | `false` | Show warning indicator |
20+
| `variant` | `'button' \| 'horizontal'` | ❌ | `'button'` | Layout variant |
21+
| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Icon size |
22+
23+
## Usage Examples
24+
25+
### Basic Usage
26+
27+
```tsx
28+
import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";
29+
30+
function MyComponent() {
31+
return <RtkControlbarButton label="Mute" icon={muteIcon} />;
32+
}
33+
```
34+
35+
### With Properties
36+
37+
```tsx
38+
import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";
39+
40+
function MyComponent() {
41+
return (
42+
<RtkControlbarButton
43+
label="Mute"
44+
icon={muteIcon}
45+
variant="horizontal"
46+
size="md"
47+
onClick={() => console.log("pressed")}
48+
/>
49+
);
50+
}
51+
```

0 commit comments

Comments
 (0)