Skip to main content

DyteDialogManager

A component which handles all dialog elements in a component such as:

  • dyte-settings
  • dyte-leave-meeting
  • dyte-permissions-message
  • dyte-image-viewer
  • dyte-remote-access-manager
  • dyte-breakout-rooms-manager

This components depends on the values from states object.

LIVE EDITOR
function Example() {
  const [states, setStates] = useState({});

  const setState = (s) => setStates((states) => ({ ...states, ...s }));

  return (
    <Row>
      <DyteButton onClick={() => setState({ activeSettings: true })}>
        Show Settings
      </DyteButton>
      <DyteButton onClick={() => setState({ activeLeaveConfirmation: true })}>
        Show Leave Confirmation
      </DyteButton>
      <DyteButton
        onClick={() =>
          setState({
            activePermissionsMessage: { enabled: true, kind: 'audio' },
          })
        }
      >
        Show Permissions Troubleshooting UI
      </DyteButton>
      <DyteButton onClick={() => setState({ activeRemoteAccessManager: true })}>
        Show Remote Access Manager
      </DyteButton>
      <DyteDialogManager
        meeting={meeting}
        states={states}
        onDyteStateUpdate={(e) => setState(e.detail)}
      />
    </Row>
  );
}
Preview
Show SettingsShow Leave ConfirmationShow Permissions Troubleshooting UIShow Remote Access Manager

Props​

config

UI Config

Default
defaultConfig

iconPack

Icon pack

Default
defaultIconPack

meeting

Meeting object

size

Size

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

states

States object

Default
storeState
Type
States

t

Language

Default
useLanguage()