Skip to main content

DyteParticipantTile

A component which plays a participants video and allows for placement of components like dyte-name-tag, dyte-audio-visualizer or any other component.

LIVE EDITOR

import { DyteParticipantTile, DyteNameTag, DyteAudioVisualizer } from "@dytesdk/react-ui-kit";
import { useDyteMeeting } from "@dytesdk/react-web-core";

export default function MyMeetingUI() {
const { meeting } = useDyteMeeting();
return (
  <DyteParticipantTile participant={meeting.self}>
    <DyteNameTag participant={meeting.self}>
      <DyteAudioVisualizer slot="start" />
    </DyteNameTag>
  </DyteParticipantTile>
);
}

You can change the nameTagPosition to any of the supported values and change the placement of audio-visualizer in name-tag as well.

LIVE EDITOR

import { DyteParticipantTile, DyteNameTag, DyteAudioVisualizer } from "@dytesdk/react-ui-kit";
import { useDyteMeeting } from "@dytesdk/react-web-core";

export default function MyMeetingUI() {
const { meeting } = useDyteMeeting();
return (
  <DyteParticipantTile participant={meeting.self} nameTagPosition="bottom-center">
    <DyteNameTag participant={meeting.self}>
      <DyteAudioVisualizer slot="start" />
    </DyteNameTag>
  </DyteParticipantTile>
);
}

It also has a few variants.

LIVE EDITOR

import { DyteParticipantTile, DyteNameTag, DyteAudioVisualizer } from "@dytesdk/react-ui-kit";
import { useDyteMeeting } from "@dytesdk/react-web-core";

export default function MyMeetingUI() {
const { meeting } = useDyteMeeting();

return (
<DyteParticipantTile
    participant={meeting.self}
    nameTagPosition="bottom-center" 
    variant="gradient"
  >
<DyteNameTag participant={meeting.self}>
<DyteAudioVisualizer slot="start" />
</DyteNameTag>
</DyteParticipantTile>
);
}

Props​

participant

required

Participant object

config

Config object

Default
defaultConfig

iconPack

Icon pack

Default
defaultIconPack

isPreview

Whether tile is used for preview

Default
false
Type
boolean

meeting

Meeting object

nameTagPosition

Position of name tag

Default
'bottom-left'
Type
"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"

size

Size

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

states

States object

Type
States

t

Language

Default
useLanguage()

variant

Variant

Default
'solid'
Type
"gradient" | "solid"