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.
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: