Skip to main content

dyte-grid

The main grid component which abstracts all the grid handling logic and renders it for you.

<dyte-grid id="dyte-el"></dyte-grid>

<script>
  const el = document.getElementById('dyte-el');
  el.meeting = meeting;
</script>

<style>
  dyte-grid {
    height: 360px;
  }
</style>

Props​

meeting

required

Meeting object

aspectRatio

The aspect ratio of each participant

Default
'16:9'
Type
string

config

Config object

Default
defaultConfig

gap

Gap between participants

Default
8
Type
number

gridSize

Grid size

Default
defaultGridSize
Type
GridSize

iconPack

Icon pack

Default
defaultIconPack

layout

Grid Layout

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

overrides

Default
{}
Type
any

size

Size

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

states

States

Default
storeState
Type
States

t

Language

Default
useLanguage()