Skip to main content

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 <dyte-meeting /> monolith component in case you want to write less code and not handle all the states and components rendering.

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

<body>
  <dyte-meeting id="my-meeting"></dyte-meeting>

  <script>
    const init = async () => {
      const meeting = await DyteClient.init({
        authToken: '',
        roomName: '',
        defaults: {
          audio: true,
          video: true,
        },
      });

      document.getElementById('my-meeting').meeting = meeting;
    };

    init();
  </script>
</body>

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 which renders a grid if you join the meeting.

<div id="app">
  <div id="joining">Joining...</div>

  <div id="joined-screen" style="display: none;">
    <dyte-grid id="my-grid" class="dyte"></dyte-grid>
    <dyte-mic-toggle class="dyte"></dyte-mic-toggle>
    <dyte-camera-toggle class="dyte"></dyte-camera-toggle>
  </div>
</div>

<script>
  // load meeting
  const app = document.getElementById('app');

  function passMeeting() {
    const els = document.getElementsByClassName('dyte');
    for (const el of els) {
      el.meeting = meeting;
    }
  }

  function handleApp() {
    meeting.self.on('roomJoined', () => {
      document.getElementById('joining').remove();
      const joinedScreen = document.getElementById('joined-screen');
      joinedScreen.style.display = 'block';
      passMeeting();
    });
  }

  handleApp();
</script>

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.

PropDescription
meetingThe web-core DyteClient object. Contains all the meeting specific data & APIs.
configThe UI Config config
ti18n helper method
iconPackIconPack object

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

const gridEl = document.createElement('dyte-grid');

gridEl.meeting = meeting;
gridEl.config = config;
gridEl.t = t;
gridEl.iconPack = iconPack;

Component Specific Props​

Each component also has a set of props specifically.

Here are some examples:

Button variants​

<dyte-button>Primary Button (Default)</dyte-button>
<dyte-button variant="secondary">Secondary button</dyte-button>
<dyte-button variant="danger">Danger button</dyte-button>
<dyte-button variant="ghost">Ghost button</dyte-button>

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.

const nameTagSelf = document.createElement('dyte-grid');
const nameTagSelfWithYou = nameTagSelf.cloneNode(true);

nameTagSelf.participant = nameTagSelfWithYou.participant = participant;

// You should also pass the `meeting` object to see the
// `(you)` text in name tag to identify self
nameTagSelfWithYou.meeting = meeting;

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 - dyte-grid
  • Normal Grid components - dyte-simple-grid, dyte-mixed-grid, dyte-spotlight-grid

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.

PropDescription
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 changing the aspectRatio and gap props.

<!-- Pass meeting object to this component too! -->
<dyte-grid aspect-ratio="16:9" gap="8" size="sm"></dyte-grid>

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​
// load meeting

const simpleGrid = document.createElement('dyte-simple-grid');
simpleGrid.aspectRatio = '1:1';
simpleGrid.gap = 8;
simpleGrid.participants = [meeting.self, meeting.self];