Components Basics

Learn about the structure of an individual component and figure out how to use the UI Kit effectively.

Usage Guide

With the UI Kit, we provide a few set of ways to use it, depending on your needs and use case.

Write less code

You can use the provided <DyteMeeting /> monolith component in case you want to write less code and not handle all the states and components rendering.

DyteMeeting takes care of all of it and loads the entire meeting UI from your preset.

Using individual components

If you wish to integrate UI Kit components into your UI at various parts, you can use the individual components.

Here is a basic example with the help of hooks.

Default Props

Most of the components accept a set of a Default Props for essential features such as meeting data, meeting APIs, UI Configuration, internationalisation & icons.

Prop	Description
meeting	The web-core DyteClient object. Contains all the meeting specific data & APIs.
config	The UI Config config
t	i18n helper method
iconPack	IconPack object

Here is a simple example of how you pass these props to components, here a DyteGrid:

function Example() {
  // load your data

  return (
    <DyteGrid meeting={meeting} config={config} t={t} iconPack={iconPack} />
  );
}

Component Specific Props

Each component also has a set of props specifically.

Here are some examples:

Button variants

Participant components

These are components which depend on a single participant object or a participant list.

meeting.self and participant objects from meeting.participants can be passed as a participant to this prop.

Grid Components

We have a set of grid components that help you to have any kind of grid you wish.

There are two types of grid components, so that the grid can be easily extended and modularized.

• Parent Grid component - DyteGrid
• Normal Grid components - DyteSimpleGrid, DyteMixedGrid, DyteSpotlightGrid

Parent Grid Component

The DyteGrid component is a monolith component which handles all grid related events and data on it's own and passes the following props to it's children.

Prop	Description
participants[]	Active Participants
pinnedParticipants[]	Pinned Participants
screenShareParticipants[]	Participants who are screen sharing
plugins[]	Active Plugins

These props are passed to it's children which it computes from the UI Config which is passed to it. By default it will use the default UI Config.

tip

Try editing the aspectRatio and gap props.

Normal Grid Components

These components just accept the props mentioned above and render the UI.

Read more about them in their Reference pages.

DyteSimpleGrid

Accepts: participants, pinnedParticipants.

This grid renders just the ParticipantTiles of the participants you pass to it. It also brings pinnedParticipants to the start of the grid.

DyteSimpleGrid

Accepts: participants, pinnedParticipants.

This grid renders the ParticipantTiles of the participants and pinnedParticipants in separate grids.

Pinned participants are in spotlight area, i.e; larger grid.

DyteMixedGrid

Accepts: participants, pinnedParticipants, screenShareParticipants, plugins.

This grid renders screenshares as well as plugins in the main larger view and renders a smaller grid on the right side which is configurable via the UI Config. You can use SimleGrid or SpotlightGrid here.

If you just want to render self twice in a SimpleGrid:

Example for SimpleGrid