The main grid component which abstracts all the grid handling logic and renders it for you.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
aspectRatio |
string |
✅ | - | The aspect ratio of each participant |
config |
UIConfig |
❌ | createDefaultConfig() |
Config object |
gap |
number |
✅ | - | Gap between participants |
gridSize |
GridSize |
✅ | - | Grid size |
iconPack |
IconPack |
❌ | defaultIconPack |
Icon pack |
layout |
GridLayout |
✅ | - | Grid Layout |
meeting |
Meeting |
✅ | - | Meeting object |
overrides |
any |
✅ | - | @deprecated |
size |
Size |
✅ | - | Size |
states |
States |
✅ | - | States |
t |
RtkI18n |
❌ | useLanguage() |
Language |
import { RtkGrid } from '@cloudflare/realtimekit-react-ui';
function MyComponent() {
return <RtkGrid />;
}import { RtkGrid } from '@cloudflare/realtimekit-react-ui';
function MyComponent() {
return (
<RtkGrid
aspectRatio="example"
gap={42}
gridSize="md"
/>
);
}