Skip to main content

States Based UI Split

Source Code: https://github.com/dyte-io/react-samples/tree/main/samples/create-your-own-ui

Now that the basic states and configs handling is taken care of, we can focus on customisation.

states.meeting represents the meeting state such as setup/ended/waiting/joined that can be utilised to show different screens.

LIVE EDITOR

import { defaultConfig, generateConfig } from '@dytesdk/react-ui-kit';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
import { useEffect, useState } from 'react';

function CustomDyteMeeting({ meeting, config, states, setStates }: { meeting: DyteClient, config: UIConfig,  states: CustomStates, setStates: SetStates}){
    if (!meeting) {
        return <div> A loading screen comes here </div>;
      }
    
      if (states.meeting === 'setup') {
        return <div>Pre-call UI comes here </div>;
      }
    
      if(states.meeting === 'ended'){
        return <div>Post-call UI comes here </div>;
      }
    
      if(states.meeting === 'waiting'){
        return <div>Waiting room UI comes here </div>;
      }
    
      if(states.meeting === 'joined'){
        return <div>In-call UI comes here </div>;
      }
}

export default function Meeting() {
  const { meeting } = useDyteMeeting();
  const [config, setConfig] = useState(defaultConfig);
  /**
  * We need setStates method to add custom functionalities,
  * as well as to ensure that web-core & ui-kit are in Sync.
  */
  const [states, setStates] = useState<CustomStates>({
    meeting: 'setup',

Since we have already discussed how you can build a custom pre-call UI from scratch, we will now focus exclusively on the in-meeting UI.

In the next steps, we will learn how we can create custom header, footer and the stage UI using Dyte components.