diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAudioVisualizer.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAudioVisualizer.mdx new file mode 100644 index 000000000000000..d713be377a5c1d4 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAudioVisualizer.mdx @@ -0,0 +1,41 @@ +--- +pcx_content_type: reference +title: RtkAudioVisualizer +description: API reference for RtkAudioVisualizer component (React Native Library) +--- + +Displays an audio visualizer with animated bars representing a participant's audio levels. + +## Properties + +| Property | Type | Required | Default | Description | +| --------------- | ------------------------------ | -------- | ----------------- | ---------------------------------------------- | +| `participant` | `Peer \| RTKParticipant` | ✅ | - | The participant whose audio to visualize | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack for icons | +| `isScreenshare` | `boolean` | ❌ | `false` | Whether this is a screenshare audio visualizer | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size of the visualizer | +| `variant` | `'bar'` | ❌ | `'bar'` | Visual variant of the visualizer | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkAudioVisualizer } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkAudioVisualizer } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAvatar.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAvatar.mdx new file mode 100644 index 000000000000000..8d51682a8f2a445 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkAvatar.mdx @@ -0,0 +1,38 @@ +--- +pcx_content_type: reference +title: RtkAvatar +description: API reference for RtkAvatar component (React Native Library) +--- + +Displays a participant's avatar image or initials-based fallback avatar. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ------------------------------------- | -------- | ----------------- | --------------------------------------- | +| `participant` | `RTKParticipant \| RTKSelf` | ✅ | - | The participant whose avatar to display | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size of the avatar | +| `variant` | `'circular' \| 'hexagon' \| 'square'` | ❌ | `'circular'` | Shape variant of the avatar | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkAvatar } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkAvatar } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkButton.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkButton.mdx new file mode 100644 index 000000000000000..d04ab1dc1a13e47 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkButton.mdx @@ -0,0 +1,51 @@ +--- +pcx_content_type: reference +title: RtkButton +description: API reference for RtkButton component (React Native Library) +--- + +A general-purpose button component with multiple variants and sizes. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------------------------- | -------- | ---------- | -------------------------------- | +| `children` | `ReactNode` | ❌ | - | Button content/label | +| `onClick` | `any` | ✅ | - | Press handler callback | +| `kind` | `'button' \| 'icon' \| 'wide'` | ❌ | `'button'` | Button kind | +| `variant` | `'danger' \| 'ghost' \| 'primary' \| 'secondary'` | ❌ | - | Visual style variant | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Button size | +| `reverse` | `boolean` | ❌ | `false` | Reverse the button content order | +| `disabled` | `boolean` | ❌ | - | Whether the button is disabled | +| `style` | `StyleProp` | ❌ | - | Custom React Native styles | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkButton } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return console.log("pressed")}>Press Me; +} +``` + +### With Properties + +```tsx +import { RtkButton } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + console.log("pressed")} + variant="primary" + size="md" + kind="wide" + > + Join Meeting + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkCameraToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkCameraToggle.mdx new file mode 100644 index 000000000000000..3d3662024d4fd5b --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkCameraToggle.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkCameraToggle +description: API reference for RtkCameraToggle component (React Native Library) +--- + +Toggle button to enable or disable the local participant's camera. Automatically hides if the participant lacks video production permissions. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkCameraToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkCameraToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChat.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChat.mdx new file mode 100644 index 000000000000000..18d556a7f1e4f51 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChat.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkChat +description: API reference for RtkChat component (React Native Library) +--- + +Full chat interface with message list, text input, image/file upload support, and pinned messages. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkChat } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkChat } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChatToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChatToggle.mdx new file mode 100644 index 000000000000000..e16ec3cccb8c5ea --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkChatToggle.mdx @@ -0,0 +1,40 @@ +--- +pcx_content_type: reference +title: RtkChatToggle +description: API reference for RtkChatToggle component (React Native Library) +--- + +Toggle button to open the chat sidebar panel. Hides if chat permissions are not available. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `states` | `States` | ❌ | - | UI state object | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | - | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkChatToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkChatToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkClock.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkClock.mdx new file mode 100644 index 000000000000000..11dbb8562631002 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkClock.mdx @@ -0,0 +1,37 @@ +--- +pcx_content_type: reference +title: RtkClock +description: API reference for RtkClock component (React Native Library) +--- + +Displays elapsed meeting time as a running clock (HH:MM:SS or MM:SS). + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkClock } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkClock } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbar.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbar.mdx new file mode 100644 index 000000000000000..cca91fb98b8886c --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbar.mdx @@ -0,0 +1,48 @@ +--- +pcx_content_type: reference +title: RtkControlbar +description: API reference for RtkControlbar component (React Native Library) +--- + +The main control bar container that renders meeting controls (mic, camera, leave, and more) using the declarative UI config system. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | --------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `variant` | `'boxed' \| 'solid'` | ❌ | `'solid'` | Visual style variant | +| `iconPack` | `IconPack` | ❌ | - | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkControlbar } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbarButton.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbarButton.mdx new file mode 100644 index 000000000000000..991d71c97f25160 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkControlbarButton.mdx @@ -0,0 +1,51 @@ +--- +pcx_content_type: reference +title: RtkControlbarButton +description: API reference for RtkControlbarButton component (React Native Library) +--- + +A reusable button for the control bar with icon, label, loading state, and warning indicator support. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ------------------------------ | -------- | ----------------- | ------------------------------------ | +| `label` | `string` | ✅ | `' '` | Button label text | +| `icon` | `string` | ✅ | - | SVG icon string | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `isLoading` | `boolean` | ❌ | `false` | Show loading spinner instead of icon | +| `disabled` | `boolean` | ❌ | `false` | Whether the button is disabled | +| `onClick` | `() => void` | ❌ | - | Press handler callback | +| `showWarning` | `boolean` | ❌ | `false` | Show warning indicator | +| `variant` | `'button' \| 'horizontal'` | ❌ | `'button'` | Layout variant | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Icon size | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + console.log("pressed")} + /> + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkDialog.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkDialog.mdx new file mode 100644 index 000000000000000..f2828c979502532 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkDialog.mdx @@ -0,0 +1,58 @@ +--- +pcx_content_type: reference +title: RtkDialog +description: API reference for RtkDialog component (React Native Library) +--- + +A modal dialog overlay component with optional close button. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------------ | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `children` | `ReactNode` | ✅ | - | Dialog content | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `onRtkDialogClose` | `any` | ✅ | - | Callback when dialog is closed | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `hideCloseButton` | `boolean` | ❌ | `false` | Hide the close button | +| `open` | `boolean` | ❌ | - | Whether the dialog is visible | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkDialog } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + setOpen(false)}> + Dialog content + + ); +} +``` + +### With Properties + +```tsx +import { RtkDialog } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + setOpen(false)} + hideCloseButton={false} + size="md" + > + Dialog content + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkDialogManager.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkDialogManager.mdx new file mode 100644 index 000000000000000..e5f705139a66035 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkDialogManager.mdx @@ -0,0 +1,48 @@ +--- +pcx_content_type: reference +title: RtkDialogManager +description: API reference for RtkDialogManager component (React Native Library) +--- + +Manages and renders modal dialogs for leave confirmation, settings, join stage confirmation, and permissions messages. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------------ | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `onRtkStateUpdate` | `(e) => void` | ❌ | `() => \{\}` | Callback when UI state changes | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkDialogManager } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkDialogManager } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + handleStateUpdate(e)} + /> + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkEndedScreen.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkEndedScreen.mdx new file mode 100644 index 000000000000000..9f77e78298b90a5 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkEndedScreen.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkEndedScreen +description: API reference for RtkEndedScreen component (React Native Library) +--- + +Screen displayed when the meeting has ended. + +## Properties + +| Property | Type | Required | Default | Description | +| --------- | ------------------------------ | -------- | --------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ❌ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkEndedScreen } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkEndedScreen } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkFileMessage.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkFileMessage.mdx new file mode 100644 index 000000000000000..9f42af3d29340e1 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkFileMessage.mdx @@ -0,0 +1,40 @@ +--- +pcx_content_type: reference +title: RtkFileMessage +description: API reference for RtkFileMessage component (React Native Library) +--- + +Renders a file message in chat with file name, size, extension, and download button. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ---------- | -------- | ----------------- | --------------------------------------------------- | +| `message` | `Message` | ✅ | - | The chat message object | +| `isContinued` | `boolean` | ❌ | `false` | Whether this message continues from the same sender | +| `now` | `Date` | ❌ | `new Date()` | Current time for relative timestamps | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkFileMessage } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkFileMessage } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkGrid.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkGrid.mdx new file mode 100644 index 000000000000000..fe2effa32768858 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkGrid.mdx @@ -0,0 +1,42 @@ +--- +pcx_content_type: reference +title: RtkGrid +description: API reference for RtkGrid component (React Native Library) +--- + +The main participant grid that automatically switches between simple, mixed, spotlight, and livestream layouts based on meeting state. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `aspectRatio` | `string` | ❌ | `'3:4'` | Aspect ratio for grid tiles | +| `gap` | `number` | ❌ | `8` | Gap between grid tiles in pixels | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkGrid } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkGrid } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkGridPagination.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkGridPagination.mdx new file mode 100644 index 000000000000000..5f821db4a4239a5 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkGridPagination.mdx @@ -0,0 +1,44 @@ +--- +pcx_content_type: reference +title: RtkGridPagination +description: API reference for RtkGridPagination component (React Native Library) +--- + +Pagination controls for navigating between pages of participants in the grid. Shows page numbers and navigation arrows. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkGridPagination } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkGridPagination } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkHeader.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkHeader.mdx new file mode 100644 index 000000000000000..7d91c27e377ff20 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkHeader.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkHeader +description: API reference for RtkHeader component (React Native Library) +--- + +The meeting header bar that renders logo, title, participant count, clock, and other header elements using the declarative UI config system. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | --------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ❌ | - | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkHeader } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkHeader } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkIcon.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkIcon.mdx new file mode 100644 index 000000000000000..3b78ffaff8e9805 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkIcon.mdx @@ -0,0 +1,38 @@ +--- +pcx_content_type: reference +title: RtkIcon +description: API reference for RtkIcon component (React Native Library) +--- + +Renders an SVG icon from an icon string, applying the current theme text color. + +## Properties + +| Property | Type | Required | Default | Description | +| -------- | -------- | -------- | ------- | ------------------------- | +| `icon` | `string` | ✅ | - | SVG icon string to render | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkIcon } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { + RtkIcon, + defaultIconPack, +} from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkIdleScreen.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkIdleScreen.mdx new file mode 100644 index 000000000000000..665e26fc45aa0ef --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkIdleScreen.mdx @@ -0,0 +1,38 @@ +--- +pcx_content_type: reference +title: RtkIdleScreen +description: API reference for RtkIdleScreen component (React Native Library) +--- + +Loading/idle screen displayed while the meeting is initializing, showing a logo and spinner. + +## Properties + +| Property | Type | Required | Default | Description | +| -------- | ---------- | -------- | ------- | ------------------------------------------- | +| `config` | `UIConfig` | ✅ | - | UI configuration object (used for logo URL) | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkIdleScreen } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { + RtkIdleScreen, + defaultConfig, +} from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkImageMessage.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkImageMessage.mdx new file mode 100644 index 000000000000000..f916bdd8157d706 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkImageMessage.mdx @@ -0,0 +1,45 @@ +--- +pcx_content_type: reference +title: RtkImageMessage +description: API reference for RtkImageMessage component (React Native Library) +--- + +Renders an image message in chat with loading indicator and fullscreen support. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ---------- | -------- | ----------------- | --------------------------------------------------- | +| `message` | `any` | ✅ | - | The image message object with link property | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `isContinued` | `boolean` | ❌ | `false` | Whether this message continues from the same sender | +| `now` | `Date` | ❌ | `new Date()` | Current time for relative timestamps | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkImageMessage } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkImageMessage } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkImageViewer.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkImageViewer.mdx new file mode 100644 index 000000000000000..2ce3dd502a5bd52 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkImageViewer.mdx @@ -0,0 +1,40 @@ +--- +pcx_content_type: reference +title: RtkImageViewer +description: API reference for RtkImageViewer component (React Native Library) +--- + +Image viewer with fullscreen toggle and download functionality for chat images. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ------------------------------ | -------- | ----------------- | --------------------------------------------------- | +| `image` | `any` | ✅ | - | The image message object | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Size variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `isContinued` | `boolean` | ❌ | `false` | Whether this message continues from the same sender | +| `_id` | `string \| number` | ❌ | - | Unique identifier for fullscreen tracking | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkImageViewer } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkImageViewer } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkJoinStage.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkJoinStage.mdx new file mode 100644 index 000000000000000..9b8243aca93edcb --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkJoinStage.mdx @@ -0,0 +1,40 @@ +--- +pcx_content_type: reference +title: RtkJoinStage +description: API reference for RtkJoinStage component (React Native Library) +--- + +Join stage confirmation dialog with video preview and mic/camera toggles for webinar/livestream participants. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkJoinStage } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkJoinStage } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLeaveButton.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLeaveButton.mdx new file mode 100644 index 000000000000000..a07b36e1955995b --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLeaveButton.mdx @@ -0,0 +1,38 @@ +--- +pcx_content_type: reference +title: RtkLeaveButton +description: API reference for RtkLeaveButton component (React Native Library) +--- + +Button to trigger the leave meeting confirmation dialog. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | ------------------------- | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Button size | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkLeaveButton } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkLeaveButton } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLeaveMeeting.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLeaveMeeting.mdx new file mode 100644 index 000000000000000..76f40ce23944dcb --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLeaveMeeting.mdx @@ -0,0 +1,45 @@ +--- +pcx_content_type: reference +title: RtkLeaveMeeting +description: API reference for RtkLeaveMeeting component (React Native Library) +--- + +Leave meeting confirmation dialog with options to leave or end the meeting for all (if host). + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `onClose` | `any` | ✅ | - | Callback to close the dialog | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkLeaveMeeting } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return setOpen(false)} />; +} +``` + +### With Properties + +```tsx +import { RtkLeaveMeeting } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + setOpen(false)} + states={states} + /> + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamIndicator.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamIndicator.mdx new file mode 100644 index 000000000000000..0fc3367ab4e6892 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamIndicator.mdx @@ -0,0 +1,38 @@ +--- +pcx_content_type: reference +title: RtkLiveStreamIndicator +description: API reference for RtkLiveStreamIndicator component (React Native Library) +--- + +Displays a "Live" indicator when a livestream is active. Only visible in livestream mode for off-stage viewers. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `t` | `RtkI18n` | ❌ | `useLanguage()` | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkLiveStreamIndicator } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkLiveStreamIndicator } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamPlayer.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamPlayer.mdx new file mode 100644 index 000000000000000..27ab5c1010f7cc6 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamPlayer.mdx @@ -0,0 +1,23 @@ +--- +pcx_content_type: reference +title: RtkLiveStreamPlayer +description: API reference for RtkLiveStreamPlayer component (React Native Library) +--- + +IVS (Amazon Interactive Video Service) player for viewing livestream playback. Requires `amazon-ivs-react-native-player` peer dependency. + +## Properties + +This component does not accept any props. It reads the livestream URL from the meeting context. + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkLiveStreamPlayer } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamStageToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamStageToggle.mdx new file mode 100644 index 000000000000000..0bb39d3a23cf408 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamStageToggle.mdx @@ -0,0 +1,41 @@ +--- +pcx_content_type: reference +title: RtkLiveStreamStageToggle +description: API reference for RtkLiveStreamStageToggle component (React Native Library) +--- + +Toggle button for joining or leaving the livestream stage. Only visible in livestream mode. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `variant` | `'button' \| 'horizontal'` | ❌ | `'button'` | Layout variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkLiveStreamStageToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkLiveStreamStageToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamToggle.mdx new file mode 100644 index 000000000000000..1ac28acecdf835e --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamToggle.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkLiveStreamToggle +description: API reference for RtkLiveStreamToggle component (React Native Library) +--- + +Toggle button to start or stop a livestream. Only visible for hosts with livestream permissions. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkLiveStreamToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkLiveStreamToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamViewerCount.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamViewerCount.mdx new file mode 100644 index 000000000000000..2d6ce82bd489c5d --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLiveStreamViewerCount.mdx @@ -0,0 +1,51 @@ +--- +pcx_content_type: reference +title: RtkLiveStreamViewerCount +description: API reference for RtkLiveStreamViewerCount component (React Native Library) +--- + +Displays the current livestream viewer count. Only visible in livestream mode. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ✅ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { + RtkLiveStreamViewerCount, + useLanguage, +} from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + const t = useLanguage(); + return ; +} +``` + +### With Properties + +```tsx +import { + RtkLiveStreamViewerCount, + useLanguage, +} from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + const t = useLanguage(); + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLogo.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLogo.mdx new file mode 100644 index 000000000000000..72a750d8984bfae --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkLogo.mdx @@ -0,0 +1,45 @@ +--- +pcx_content_type: reference +title: RtkLogo +description: API reference for RtkLogo component (React Native Library) +--- + +Displays a logo from a URL (SVG format) in the meeting header. + +## Properties + +| Property | Type | Required | Default | Description | +| --------- | ------------ | -------- | ------- | ------------------------------------------- | +| `meeting` | `any` | ❌ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | - | UI configuration object | +| `logoUrl` | `string` | ❌ | - | URL of the logo SVG to display | +| `style` | `StyleProps` | ❌ | - | Style object with width/height for the logo | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkLogo } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkLogo } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMeeting.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMeeting.mdx new file mode 100644 index 000000000000000..a6a95d42d9ba9cf --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMeeting.mdx @@ -0,0 +1,48 @@ +--- +pcx_content_type: reference +title: RtkMeeting +description: API reference for RtkMeeting component (React Native Library) +--- + +The top-level meeting component that orchestrates the entire meeting UI. Manages meeting lifecycle (idle, setup, joined, ended, waiting states), applies design system, handles room join/leave events, and renders the appropriate screen. With this component, you do not have to handle all the states, dialogs, and other smaller bits of managing the application. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------------- | ------------------- | -------- | --------------- | ------------------------------------------------------------------------ | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `applyDesignSystem` | `boolean` | ❌ | `true` | Whether to apply the preset design system colors from the meeting config | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPackUrl` | `string` | ❌ | `''` | URL to fetch a custom icon pack from | +| `showSetupScreen` | `boolean` | ❌ | `true` | Whether to show the setup/preview screen before joining | +| `iOSScreenshareEnabled` | `boolean` | ❌ | `false` | Turn on screenshare on iOS (requires additional native setup) | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkMeeting } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkMeeting } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMeetingTitle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMeetingTitle.mdx new file mode 100644 index 000000000000000..3728643bcc6680f --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMeetingTitle.mdx @@ -0,0 +1,35 @@ +--- +pcx_content_type: reference +title: RtkMeetingTitle +description: API reference for RtkMeetingTitle component (React Native Library) +--- + +Displays the meeting title from meeting metadata. + +## Properties + +| Property | Type | Required | Default | Description | +| --------- | ------------------- | -------- | ------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkMeetingTitle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkMeetingTitle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenu.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenu.mdx new file mode 100644 index 000000000000000..9e78a3da6b26bd5 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenu.mdx @@ -0,0 +1,45 @@ +--- +pcx_content_type: reference +title: RtkMenu +description: API reference for RtkMenu component (React Native Library) +--- + +A menu container component with placement options. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ---------------------------------- | +| `children` | `ReactNode` | ✅ | - | Menu content | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ✅ | - | Size variant | +| `placement` | `'bottom' \| 'bottom-end' \| 'bottom-start' \| 'left' \| 'left-end' \| 'left-start' \| 'right' \| 'right-end' \| 'right-start' \| 'top' \| 'top-end' \| 'top-start'` | ✅ | - | Menu placement relative to trigger | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkMenu } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + Menu content + + ); +} +``` + +### With Properties + +```tsx +import { RtkMenu } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + Menu content + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenuItem.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenuItem.mdx new file mode 100644 index 000000000000000..17090178bfa278d --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenuItem.mdx @@ -0,0 +1,45 @@ +--- +pcx_content_type: reference +title: RtkMenuItem +description: API reference for RtkMenuItem component (React Native Library) +--- + +A pressable menu item within a menu. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------------- | -------- | ------- | ---------------------- | +| `children` | `ReactNode` | ✅ | - | Menu item content | +| `onClick` | `(ev) => {}` | ❌ | - | Press handler callback | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Size variant | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkMenuItem } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + ({})}> + Option 1 + + ); +} +``` + +### With Properties + +```tsx +import { RtkMenuItem } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + ({})} size="md"> + Option 1 + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenuList.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenuList.mdx new file mode 100644 index 000000000000000..85d4c165012b9a4 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMenuList.mdx @@ -0,0 +1,37 @@ +--- +pcx_content_type: reference +title: RtkMenuList +description: API reference for RtkMenuList component (React Native Library) +--- + +A horizontal list container for menu items. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ----------- | -------- | ------- | ----------------- | +| `children` | `ReactNode` | ✅ | - | Menu list content | + +## Usage Examples + +### Basic Usage + +```tsx +import { + RtkMenuList, + RtkMenuItem, +} from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + {}}> + Item 1 + + {}}> + Item 2 + + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMicToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMicToggle.mdx new file mode 100644 index 000000000000000..ffb45590ed0834f --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMicToggle.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkMicToggle +description: API reference for RtkMicToggle component (React Native Library) +--- + +Toggle button to enable or disable the local participant's microphone. Automatically hides if the participant lacks audio production permissions. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkMicToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkMicToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMixedGrid.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMixedGrid.mdx new file mode 100644 index 000000000000000..8dcb8b9c6b6b6f7 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMixedGrid.mdx @@ -0,0 +1,66 @@ +--- +pcx_content_type: reference +title: RtkMixedGrid +description: API reference for RtkMixedGrid component (React Native Library) +--- + +A grid layout that handles mixed content: participants, screenshares, plugins, and pinned participants. Automatically switches between simple, spotlight, and highlighted grid layouts. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------------------- | ------------------------------ | -------- | ----------------- | ------------------------------------------ | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `participants` | `Peer[]` | ✅ | `[]` | Array of active participants | +| `pinnedParticipants` | `Peer[]` | ✅ | `[]` | Array of pinned participants | +| `screenShareParticipants` | `Peer[]` | ✅ | `[]` | Array of participants sharing their screen | +| `plugins` | `RTKPlugin[]` | ✅ | `[]` | Array of active plugins | +| `aspectRatio` | `string` | ❌ | `'16:9'` | Aspect ratio for grid tiles | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `gap` | `number` | ❌ | `8` | Gap between grid tiles in pixels | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `variant` | `'boxed' \| 'solid'` | ❌ | `'solid'` | Visual style variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkMixedGrid } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` + +### With Properties + +```tsx +import { RtkMixedGrid } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMoreToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMoreToggle.mdx new file mode 100644 index 000000000000000..f41eb3a16684236 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMoreToggle.mdx @@ -0,0 +1,48 @@ +--- +pcx_content_type: reference +title: RtkMoreToggle +description: API reference for RtkMoreToggle component (React Native Library) +--- + +Toggle button for the "more options" overflow menu in the control bar. Shows a notification badge for pending requests. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `children` | `ReactNode` | ❌ | - | Additional content to render | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkMoreToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkMoreToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMuteToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMuteToggle.mdx new file mode 100644 index 000000000000000..cf645f537203d59 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkMuteToggle.mdx @@ -0,0 +1,38 @@ +--- +pcx_content_type: reference +title: RtkMuteToggle +description: API reference for RtkMuteToggle component (React Native Library) +--- + +Button to mute all participants' audio. Only visible for hosts with mute-all permissions. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkMuteToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkMuteToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNameTag.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNameTag.mdx new file mode 100644 index 000000000000000..892bfa7ce9d80ef --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNameTag.mdx @@ -0,0 +1,48 @@ +--- +pcx_content_type: reference +title: RtkNameTag +description: API reference for RtkNameTag component (React Native Library) +--- + +Displays a participant's name with optional child content (such as an audio visualizer icon). Used as an overlay on participant tiles. + +## Properties + +| Property | Type | Required | Default | Description | +| --------------- | ------------------------------ | -------- | ------- | -------------------------------------------------------- | +| `participant` | `Peer` | ✅ | - | The participant to display the name for | +| `meeting` | `RealtimeKitClient` | ❌ | - | The RealtimeKit meeting instance (used to identify self) | +| `isScreenshare` | `boolean` | ❌ | `false` | Whether this is a screenshare name tag | +| `maxLength` | `number` | ❌ | `20` | Maximum width offset for the name tag | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Text size | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `children` | `ReactNode` | ❌ | - | Content to render before the name | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkNameTag } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkNameTag } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNotification.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNotification.mdx new file mode 100644 index 000000000000000..c25362f391b3bfe --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNotification.mdx @@ -0,0 +1,45 @@ +--- +pcx_content_type: reference +title: RtkNotification +description: API reference for RtkNotification component (React Native Library) +--- + +A single notification toast with slide-in/slide-out animation, avatar, message text, and dismiss button. + +## Properties + +| Property | Type | Required | Default | Description | +| -------------------------- | ------------------------------ | -------- | ----------------- | ----------------------------------------------------------------- | +| `notification` | `Notification` | ✅ | - | Notification object with id, message, image, duration, and button | +| `onRtkNotificationDismiss` | `any` | ❌ | - | Callback when notification is dismissed | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkNotification } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkNotification } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + handleDismiss(id)} + size="md" + /> + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNotifications.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNotifications.mdx new file mode 100644 index 000000000000000..2f4e098b20f886c --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkNotifications.mdx @@ -0,0 +1,68 @@ +--- +pcx_content_type: reference +title: RtkNotifications +description: API reference for RtkNotifications component (React Native Library) +--- + +Container that manages and displays meeting notifications (participant join/leave, chat messages, polls, network status) with sound effects. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ✅ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ✅ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ✅ | `'sm'` | Size variant | +| `states` | `States` | ✅ | - | UI state object | +| `t` | `RtkI18n` | ✅ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { + RtkNotifications, + useLanguage, +} from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + const t = useLanguage(); + return ( + + ); +} +``` + +### With Properties + +```tsx +import { + RtkNotifications, + defaultConfig, + defaultIconPack, + useLanguage, +} from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + const t = useLanguage(); + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipant.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipant.mdx new file mode 100644 index 000000000000000..3c9ee492c399bfd --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipant.mdx @@ -0,0 +1,44 @@ +--- +pcx_content_type: reference +title: RtkParticipant +description: API reference for RtkParticipant component (React Native Library) +--- + +A participant list item card showing avatar, name, audio/video status icons, and host control options (pin, kick, mute, stage management). + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `participant` | `Peer` | ✅ | - | The participant to display | +| `meeting` | `RealtimeKitClient` | ❌ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkParticipant } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkParticipant } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantCount.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantCount.mdx new file mode 100644 index 000000000000000..0ea75721fe21f0d --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantCount.mdx @@ -0,0 +1,37 @@ +--- +pcx_content_type: reference +title: RtkParticipantCount +description: API reference for RtkParticipantCount component (React Native Library) +--- + +Displays the total participant count and opens the participants sidebar when tapped. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkParticipantCount } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkParticipantCount } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantTile.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantTile.mdx new file mode 100644 index 000000000000000..e598ae8e7d925f6 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantTile.mdx @@ -0,0 +1,53 @@ +--- +pcx_content_type: reference +title: RtkParticipantTile +description: API reference for RtkParticipantTile component (React Native Library) +--- + +A video tile for a single participant showing their video feed, name tag with audio indicator, avatar (when video is off), and pin indicator. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------- | ----------------------------------------------------------------------------------------------------------- | -------- | ----------------- | ------------------------------------------------------ | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `participant` | `RTKParticipant \| RTKSelf` | ✅ | - | The participant to render | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `style` | `StyleProp` | ❌ | - | Custom styles (typically width/height for grid sizing) | +| `nameTagPosition` | `'bottom-center' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'top-left' \| 'top-right' \| 'none'` | ❌ | `'bottom-left'` | Position of the name tag overlay | +| `isPreview` | `boolean` | ❌ | `false` | Whether this is a preview tile (setup screen) | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `children` | `ReactNode` | ❌ | - | Additional content to overlay on the tile | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkParticipantTile } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkParticipantTile } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantToggle.mdx new file mode 100644 index 000000000000000..31f186d89f1f28e --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantToggle.mdx @@ -0,0 +1,40 @@ +--- +pcx_content_type: reference +title: RtkParticipantToggle +description: API reference for RtkParticipantToggle component (React Native Library) +--- + +Toggle button to open the participants sidebar panel. Shows a badge with pending request count. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkParticipantToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkParticipantToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantWaiting.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantWaiting.mdx new file mode 100644 index 000000000000000..cdba7c82ea9ac74 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipantWaiting.mdx @@ -0,0 +1,44 @@ +--- +pcx_content_type: reference +title: RtkParticipantWaiting +description: API reference for RtkParticipantWaiting component (React Native Library) +--- + +A waiting participant card with accept/reject buttons for waitlist and stage request management. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `participant` | `Peer` | ✅ | - | The waiting participant | +| `meeting` | `RealtimeKitClient` | ❌ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkParticipantWaiting } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkParticipantWaiting } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipants.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipants.mdx new file mode 100644 index 000000000000000..7ee88ce0c4aa5db --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkParticipants.mdx @@ -0,0 +1,40 @@ +--- +pcx_content_type: reference +title: RtkParticipants +description: API reference for RtkParticipants component (React Native Library) +--- + +Full participants list panel showing on-stage participants, viewers, waitlisted users, and stage request management with accept/reject all functionality. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `states` | `States` | ❌ | - | UI state object | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkParticipants } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkParticipants } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPermissionsMessage.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPermissionsMessage.mdx new file mode 100644 index 000000000000000..87c2c9f308c6d83 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPermissionsMessage.mdx @@ -0,0 +1,37 @@ +--- +pcx_content_type: reference +title: RtkPermissionsMessage +description: API reference for RtkPermissionsMessage component (React Native Library) +--- + +Displays a message when device permissions (camera/microphone) are denied, with options to continue or open system settings. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkPermissionsMessage } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkPermissionsMessage } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPluginMain.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPluginMain.mdx new file mode 100644 index 000000000000000..3bd4e8f9d9cc5f7 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPluginMain.mdx @@ -0,0 +1,43 @@ +--- +pcx_content_type: reference +title: RtkPluginMain +description: API reference for RtkPluginMain component (React Native Library) +--- + +Renders an active plugin in a WebView with fullscreen toggle and close button. Handles plugin iframe communication. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------- | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `plugin` | `RTKPlugin` | ✅ | - | The plugin to render | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkPluginMain } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkPluginMain } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPlugins.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPlugins.mdx new file mode 100644 index 000000000000000..b4842af2b25ab32 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPlugins.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkPlugins +description: API reference for RtkPlugins component (React Native Library) +--- + +Plugin management panel showing active plugins and the plugin store with activate/deactivate controls. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkPlugins } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkPlugins } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPluginsToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPluginsToggle.mdx new file mode 100644 index 000000000000000..e05d2991923c8f0 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPluginsToggle.mdx @@ -0,0 +1,40 @@ +--- +pcx_content_type: reference +title: RtkPluginsToggle +description: API reference for RtkPluginsToggle component (React Native Library) +--- + +Toggle button to open the plugins sidebar panel. Hides if plugin permissions are not available. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `states` | `States` | ❌ | - | UI state object | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkPluginsToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkPluginsToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPoll.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPoll.mdx new file mode 100644 index 000000000000000..14b5771b3b4580b --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPoll.mdx @@ -0,0 +1,47 @@ +--- +pcx_content_type: reference +title: RtkPoll +description: API reference for RtkPoll component (React Native Library) +--- + +Renders a single poll with question, votable options, vote counts, and voter avatars. + +## Properties + +| Property | Type | Required | Default | Description | +| --------------- | ------------------- | -------- | ----------------- | ---------------------------------------------------- | +| `poll` | `Poll` | ✅ | - | The poll object to display | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `onRtkVotePoll` | `any` | ❌ | - | Callback when a vote is cast (receives option index) | +| `self` | `string` | ❌ | - | Self user ID | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkPoll } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkPoll } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + handleVote(index)} + self={selfUserId} + /> + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPollForm.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPollForm.mdx new file mode 100644 index 000000000000000..94f5b5d4a49a8ab --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPollForm.mdx @@ -0,0 +1,42 @@ +--- +pcx_content_type: reference +title: RtkPollForm +description: API reference for RtkPollForm component (React Native Library) +--- + +Form for creating a new poll with question, dynamic options, anonymous voting, and hide results toggles. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------- | ---------- | -------- | ----------------- | -------------------------------------------------------------------------------- | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `onRtkCreatePoll` | `any` | ❌ | - | Callback when poll is created (receives question, options, anonymous, hideVotes) | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkPollForm } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return handleCreatePoll(data)} />; +} +``` + +### With Properties + +```tsx +import { RtkPollForm } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + handleCreatePoll(data)} + iconPack={customIconPack} + /> + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPolls.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPolls.mdx new file mode 100644 index 000000000000000..810cdee9b900fd0 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPolls.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkPolls +description: API reference for RtkPolls component (React Native Library) +--- + +Full polls panel showing all polls with voting and a create poll form for hosts. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkPolls } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkPolls } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPollsToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPollsToggle.mdx new file mode 100644 index 000000000000000..19249dc47091200 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkPollsToggle.mdx @@ -0,0 +1,47 @@ +--- +pcx_content_type: reference +title: RtkPollsToggle +description: API reference for RtkPollsToggle component (React Native Library) +--- + +Toggle button to open the polls sidebar panel. Hides if poll permissions are not available. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `states` | `States` | ✅ | - | UI state object | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkPollsToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkPollsToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkRecordingIndicator.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkRecordingIndicator.mdx new file mode 100644 index 000000000000000..d250dc5fc92351d --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkRecordingIndicator.mdx @@ -0,0 +1,38 @@ +--- +pcx_content_type: reference +title: RtkRecordingIndicator +description: API reference for RtkRecordingIndicator component (React Native Library) +--- + +Displays a blinking recording indicator when the meeting is being recorded. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkRecordingIndicator } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkRecordingIndicator } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkRecordingToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkRecordingToggle.mdx new file mode 100644 index 000000000000000..1c0690642082c33 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkRecordingToggle.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkRecordingToggle +description: API reference for RtkRecordingToggle component (React Native Library) +--- + +Toggle button to start or stop meeting recording. Only visible for participants with recording permissions who are on stage. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkRecordingToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkRecordingToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkScreenShareToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkScreenShareToggle.mdx new file mode 100644 index 000000000000000..acec8dd341f5b6c --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkScreenShareToggle.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkScreenShareToggle +description: API reference for RtkScreenShareToggle component (React Native Library) +--- + +Toggle button to start or stop screen sharing. Automatically hides based on permissions and screenshare limits. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Icon size | +| `variant` | `'button' \| 'horizontal'` | ❌ | `'button'` | Layout variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkScreenShareToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkScreenShareToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkScreenshareView.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkScreenshareView.mdx new file mode 100644 index 000000000000000..620534eb765d92e --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkScreenshareView.mdx @@ -0,0 +1,50 @@ +--- +pcx_content_type: reference +title: RtkScreenshareView +description: API reference for RtkScreenshareView component (React Native Library) +--- + +Renders a participant's screen share with fullscreen toggle, name tag, and audio indicator. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------------------- | ------------------------------------------------------------------------------------------------- | -------- | ----------------- | ------------------------------------ | +| `participant` | `RTKParticipant` | ✅ | - | The participant sharing their screen | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `hideFullScreenButton` | `boolean` | ❌ | `false` | Hide the fullscreen toggle button | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `nameTagPosition` | `'bottom-center' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'top-left' \| 'top-right'` | ❌ | `'bottom-left'` | Position of the name tag overlay | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `variant` | `'gradient' \| 'solid'` | ❌ | `'solid'` | Visual style variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkScreenshareView } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkScreenshareView } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettings.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettings.mdx new file mode 100644 index 000000000000000..d153ac9a18a938e --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettings.mdx @@ -0,0 +1,46 @@ +--- +pcx_content_type: reference +title: RtkSettings +description: API reference for RtkSettings component (React Native Library) +--- + +Settings dialog with audio device selection, video device selection, and network connection status. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | ------------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `onClose` | `any` | ❌ | - | Callback to close the settings dialog | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSettings } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkSettings } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + setSettingsOpen(false)} + /> + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsAudio.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsAudio.mdx new file mode 100644 index 000000000000000..993856a927e3d89 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsAudio.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkSettingsAudio +description: API reference for RtkSettingsAudio component (React Native Library) +--- + +Audio settings panel with device selection dropdown, audio visualizer preview, and notification sound toggle. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSettingsAudio } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkSettingsAudio } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsToggle.mdx new file mode 100644 index 000000000000000..8a37cc3e52f481f --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsToggle.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkSettingsToggle +description: API reference for RtkSettingsToggle component (React Native Library) +--- + +Toggle button to open the settings dialog. Hides if no audio or video permissions are available. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | ------------------------- | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | - | Icon size | +| `states` | `States` | ❌ | - | UI state object | +| `variant` | `'button' \| 'horizontal'` | ❌ | - | Layout variant | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSettingsToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkSettingsToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsVideo.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsVideo.mdx new file mode 100644 index 000000000000000..be4c9e814a29187 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSettingsVideo.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkSettingsVideo +description: API reference for RtkSettingsVideo component (React Native Library) +--- + +Video settings panel with camera selection dropdown and live video preview. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSettingsVideo } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkSettingsVideo } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSetupScreen.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSetupScreen.mdx new file mode 100644 index 000000000000000..854a26c36a5cecc --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSetupScreen.mdx @@ -0,0 +1,47 @@ +--- +pcx_content_type: reference +title: RtkSetupScreen +description: API reference for RtkSetupScreen component (React Native Library) +--- + +Pre-join setup screen with video preview, mic/camera toggles, display name input, camera switch, and join button. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ----------------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSetupScreen } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkSetupScreen } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSidebar.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSidebar.mdx new file mode 100644 index 000000000000000..4a887265d4db77f --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSidebar.mdx @@ -0,0 +1,49 @@ +--- +pcx_content_type: reference +title: RtkSidebar +description: API reference for RtkSidebar component (React Native Library) +--- + +Full-screen sidebar modal with tabbed navigation for chat, participants, polls, and plugins panels. + +## Properties + +| Property | Type | Required | Default | Description | +| ----------------- | ------------------------------------------------------------ | -------- | ---------------------------------------------- | --------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `defaultSection` | `'chat' \| 'none' \| 'participants' \| 'plugins' \| 'polls'` | ❌ | `'chat'` | Default active tab | +| `enabledSections` | `SidebarSection[]` | ❌ | `['chat', 'polls', 'participants', 'plugins']` | Which sidebar sections to display | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSidebar } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkSidebar } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSimpleGrid.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSimpleGrid.mdx new file mode 100644 index 000000000000000..eced109ac4e6b2d --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSimpleGrid.mdx @@ -0,0 +1,52 @@ +--- +pcx_content_type: reference +title: RtkSimpleGrid +description: API reference for RtkSimpleGrid component (React Native Library) +--- + +A simple grid layout that arranges participant tiles in rows and columns with automatic sizing based on participant count. + +## Properties + +| Property | Type | Required | Default | Description | +| -------------- | ------------------------------ | -------- | ----------------- | ------------------------------------ | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `participants` | `Peer[]` | ✅ | - | Array of participants to display | +| `aspectRatio` | `string` | ❌ | `'3:4'` | Aspect ratio for grid tiles | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `gap` | `number` | ❌ | `8` | Gap between grid tiles in pixels | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | +| `style` | `StyleProp` | ❌ | - | Custom styles for the grid container | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSimpleGrid } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkSimpleGrid } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSpinner.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSpinner.mdx new file mode 100644 index 000000000000000..628269f06213d17 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSpinner.mdx @@ -0,0 +1,35 @@ +--- +pcx_content_type: reference +title: RtkSpinner +description: API reference for RtkSpinner component (React Native Library) +--- + +An animated loading spinner component. + +## Properties + +| Property | Type | Required | Default | Description | +| -------- | -------- | -------- | ------- | -------------------------------------------- | +| `style` | `object` | ❌ | - | Custom styles to override spinner appearance | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSpinner } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkSpinner } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSpotlightGrid.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSpotlightGrid.mdx new file mode 100644 index 000000000000000..a2d4b700f14a4d5 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkSpotlightGrid.mdx @@ -0,0 +1,59 @@ +--- +pcx_content_type: reference +title: RtkSpotlightGrid +description: API reference for RtkSpotlightGrid component (React Native Library) +--- + +A grid layout that highlights pinned participants in a larger view with other participants in a smaller strip. Handles livestream player display for off-stage viewers. + +## Properties + +| Property | Type | Required | Default | Description | +| -------------------- | ------------------------------ | -------- | ----------------- | ----------------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `participants` | `Peer[]` | ✅ | - | Array of active participants | +| `pinnedParticipants` | `Peer[]` | ✅ | - | Array of pinned participants to spotlight | +| `aspectRatio` | `string` | ❌ | `'3:4'` | Aspect ratio for grid tiles | +| `config` | `UIConfig` | ❌ | `defaultConfig` | UI configuration object | +| `gap` | `number` | ❌ | `4` | Gap between grid tiles in pixels | +| `iconPack` | `IconPack` | ❌ | `defaultIconPack` | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `states` | `States` | ❌ | - | UI state object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkSpotlightGrid } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` + +### With Properties + +```tsx +import { RtkSpotlightGrid } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkText.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkText.mdx new file mode 100644 index 000000000000000..6f76e8957d9e5fc --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkText.mdx @@ -0,0 +1,43 @@ +--- +pcx_content_type: reference +title: RtkText +description: API reference for RtkText component (React Native Library) +--- + +Themed text component that applies the design system's colors, font family, and font size. + +## Properties + +| Property | Type | Required | Default | Description | +| ------------ | ----------------------------------------------------------------------------------------------------- | -------- | ---------- | -------------------------------------------------- | +| `children` | `ReactNode` | ✅ | - | Text content | +| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | ❌ | `'md'` | Font size (sm=14, md=16, lg=18, xl=20) | +| `fontWeight` | `'normal' \| 'bold' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'` | ❌ | `'normal'` | Font weight | +| `style` | `StyleProp` | ❌ | `\{\}` | Custom text styles | +| `onBrand` | `boolean` | ❌ | `false` | Use brand text color instead of default text color | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkText } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return Hello World; +} +``` + +### With Properties + +```tsx +import { RtkText } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + + Meeting Title + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkTextField.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkTextField.mdx new file mode 100644 index 000000000000000..4a3f78fb73542bb --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkTextField.mdx @@ -0,0 +1,45 @@ +--- +pcx_content_type: reference +title: RtkTextField +description: API reference for RtkTextField component (React Native Library) +--- + +A themed text input field component. + +## Properties + +| Property | Type | Required | Default | Description | +| -------------- | --------------------- | -------- | -------- | ----------------------------- | +| `disabled` | `boolean` | ❌ | `false` | Whether the input is disabled | +| `placeholder` | `string` | ❌ | `''` | Placeholder text | +| `type` | `string` | ❌ | `'text'` | Input type | +| `style` | `StyleProp` | ❌ | - | Custom styles | +| `onChangeText` | `(s: string) => void` | ❌ | - | Callback when text changes | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkTextField } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkTextField } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ( + setName(text)} + disabled={false} + /> + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkUIProvider.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkUIProvider.mdx new file mode 100644 index 000000000000000..144cf59d069b982 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkUIProvider.mdx @@ -0,0 +1,53 @@ +--- +pcx_content_type: reference +title: RtkUIProvider +description: API reference for RtkUIProvider component (React Native Library) +--- + +Context provider component that wraps the meeting UI. Provides SafeAreaView, state management, and back button handling. Must wrap all Rtk UI components. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ----------- | -------- | ------- | ------------------------ | +| `children` | `ReactNode` | ✅ | - | Child components to wrap | + +## Usage Examples + +### Basic Usage + +```tsx +import { + RtkUIProvider, + RtkMeeting, +} from "@cloudflare/realtimekit-react-native-ui"; + +function App() { + return ( + + + + ); +} +``` + +### With Properties + +```tsx +import { + RtkUIProvider, + RtkGrid, + RtkControlbar, + RtkHeader, +} from "@cloudflare/realtimekit-react-native-ui"; + +function App() { + return ( + + + + + + ); +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkWaitingScreen.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkWaitingScreen.mdx new file mode 100644 index 000000000000000..5f9899a9c6363ea --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkWaitingScreen.mdx @@ -0,0 +1,36 @@ +--- +pcx_content_type: reference +title: RtkWaitingScreen +description: API reference for RtkWaitingScreen component (React Native Library) +--- + +Screen displayed while waiting to join (waitlist, kicked, disconnected states). + +## Properties + +| Property | Type | Required | Default | Description | +| -------- | ---------- | -------- | ------- | ------------------------- | +| `config` | `UIConfig` | ❌ | - | UI configuration object | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkWaitingScreen } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkWaitingScreen } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkWebinarStageToggle.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkWebinarStageToggle.mdx new file mode 100644 index 000000000000000..e1d066827b9b360 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/RtkWebinarStageToggle.mdx @@ -0,0 +1,39 @@ +--- +pcx_content_type: reference +title: RtkWebinarStageToggle +description: API reference for RtkWebinarStageToggle component (React Native Library) +--- + +Toggle button for requesting to join or leave the webinar stage. Only visible in webinar mode for participants with stage access permissions. + +## Properties + +| Property | Type | Required | Default | Description | +| ---------- | ------------------------------ | -------- | ---------- | -------------------------------- | +| `meeting` | `RealtimeKitClient` | ✅ | - | The RealtimeKit meeting instance | +| `iconPack` | `IconPack` | ❌ | - | Custom icon pack | +| `size` | `'lg' \| 'md' \| 'sm' \| 'xl'` | ❌ | `'sm'` | Size variant | +| `variant` | `'button' \| 'horizontal'` | ❌ | `'button'` | Layout variant | +| `t` | `RtkI18n` | ❌ | - | i18n translation function | + +## Usage Examples + +### Basic Usage + +```tsx +import { RtkWebinarStageToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` + +### With Properties + +```tsx +import { RtkWebinarStageToggle } from "@cloudflare/realtimekit-react-native-ui"; + +function MyComponent() { + return ; +} +``` diff --git a/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/index.mdx b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/index.mdx new file mode 100644 index 000000000000000..71cb32707550f21 --- /dev/null +++ b/src/content/docs/realtime/realtimekit/ui-kit/api-reference/react-native/index.mdx @@ -0,0 +1,8 @@ +--- +pcx_content_type: reference +title: React Native +description: Complete API reference for React Native library components +sidebar: + group: + hideIndex: true +---