DyteSetupScreen

Dyte provides a default pre-call preview UI, also known as setup screen as part of our UI components.

Previously in the Quickstart example, we used the following component.

<DyteMeeting meeting={meeting} showSetupScreen={true} />

If you want to break down the above for a custom UI but still want to reuse the default setup screen, use the following component.

LIVE EDITOR

import { DyteSetupScreen } from '@dytesdk/react-ui-kit';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';

export default function MyMeeting() {
  const { meeting } = useDyteMeeting();
  const roomState = useDyteSelector((m) => m.self.roomState);

  return (
    <div className="flex w-full h-full">
      {roomState === 'init' && <DyteSetupScreen meeting={meeting} />}
      {roomState === 'joined' && <center>Custom in-meeting UI</center>}
      {roomState === 'ended' && <center>Custom post-meeting UI</center>}
    </div>
  );
}

If you want to build a custom pre-call UI, let's go to the next page to start building one.