Skip to main content

DyteMixedGrid

A grid component which handles screenshares, plugins and participants.

LIVE EDITOR
function CustomGrid() {
  const active = useDyteSelector((m) => m.participants.active).toArray();
  const { meeting } = useDyteMeeting();

  return (
    <DyteMixedGrid
      participants={active}
      pinnedParticipants={[]}
      screenShareParticipants={[meeting.self]}
      plugins={[]}
      meeting={meeting}
      style={{ height: '400px', width: '100%' }}
    />
  );
}
Preview

Props​

aspectRatio

Aspect Ratio of participant tile Format: `width:height`

Default
'16:9'
Type
string

config

UI Config

Default
defaultConfig

gap

Gap between participant tiles

Default
8
Type
number

gridSize

Grid size

Default
defaultGridSize
Type
GridSize

iconPack

Icon Pack

Default
defaultIconPack

layout

Grid Layout

Default
'row'
Type
"column" | "row"

meeting

Meeting object

participants

Participants

Default
[]

pinnedParticipants

Pinned Participants

Default
[]

plugins

Active Plugins

Default
[]

screenShareParticipants

Screenshare Participants

Default
[]

size

Size

Type
"lg" | "md" | "sm" | "xl"

states

States object

Type
States

t

Language

Default
useLanguage()