Skip to main content

Handling States and Configs

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

DyteMeeting component does a lot more than just providing the user interface.

It does the following things internally.

  1. Keeps a mapping of components and show them according to the preset's view_type such as group_call, webinar, and livestream.
  2. Provides background color, text colors and other such CSS properties.
  3. Maintains states of modals, sidebars between web-core & ui-kit
  4. Shifts the control bar buttons to More menu if the screen size is small.
  5. Passes config, states, translation, icon packs to all child components.
  6. It is the target element that gets full screened on click of full screen toggle.
  7. Joins the meeting automatically if showSetupScreen is false.

The DyteUIProvider handles states for you. The way this works is all the individual components, when they want to change the state, they emit the updated state partials via the dyteStateUpdate event.

info

All components sync to props passed to DyteUIProvider starting from UI Kit v2.4.0, so make sure you on the latest version.

DyteUIProvider listens to this event and updates the state accordingly and then emits a dyteStatesUpdate event which contains the full states object that you can use.

You can get a copy of the states object by listening to this event like so.

import { getInitialStates, DyteUIProvider } from '@dytesdk/react-ui-kit';

function App() {
  // ...
  const [states, setStates] = useState(() => getInitialStates());

  return (
    <DyteUIProvider
      meeting={meeting}
      onDyteStatesUpdate={(e)=> {
      setStates(e.detail);
    }}>
      {/* Use the states object to update the UI */}
      {states.meeting === 'joined' && <CustomInMeetingUI />}
    </DyteUIProvider>
  );
}