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.