RtkParticipantTile

A component which plays a participants video and allows for placement of components like rtk-name-tag, rtk-audio-visualizer or any other component.

Properties

Property	Type	Required	Default	Description
config	UIConfig	❌	createDefaultConfig()	Config object
iconPack	IconPack	❌	defaultIconPack	Icon pack
isPreview	boolean	✅	-	Whether tile is used for preview
meeting	Meeting	✅	-	Meeting object
nameTagPosition	| 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center'	✅	-	Position of name tag
participant	Peer	✅	-	Participant object
size	Size	✅	-	Size
states	States	✅	-	States object
t	RtkI18n	❌	useLanguage()	Language
variant	'solid' | 'gradient'	✅	-	Variant

Usage Examples

Basic Usage

import { RtkParticipantTile } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkParticipantTile />;
}

With Properties

import { RtkParticipantTile } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkParticipantTile
      isPreview={true}
      meeting={meeting}
      nameTagPosition={| 'bottom-left'
    | 'bottom-right'
    | 'bottom-center'
    | 'top-left'
    | 'top-right'
    | 'top-center'}
    />
  );
}

Explain Code