Skip to main content

Components Basics

Let's look at the structure of individual components and how to use them when building your own UI.

There are two important things to understand about dyte UI Components:

1. They work very tightly with core SDK​

Our UI component are tightly coupled with classes from our core SDK, they will automatically update when the underlying property changes.

Participant components​

These are components which take a single participant object as prop

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

Meeting components​

Similar to participant components, there are components that take the entire meeting object

The above code will render the Chat UI, updates when there is a new message and allow you to send a new message.

2. State Management​

While meeting state is stored in core SDK's classes, there are also some pure UI states that might change during a meeting. For example, when user clicks the leave meeting button, there is a confirmation popup on the screen, this state reflects only a UI state.

To listen and manipulate these states some components will accept a states props and a onDyteStateUpdate callback prop when the state updates

<DyteDialogManager
    states={{
        activeLeaveConfirmation: true
      }}
    onDyteStateUpdate=((s) => {
      // check activeLeaveConfirmation to see if the leave dialog has been closed
    })
  />

3. Component Specific Props​

Each component can have their own set of props

Here are some examples on DyteButton component:

Button variants​