Skip to main content

Handling States and Configs

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

RtkMeeting 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 RtkUIProvider 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 rtkStateUpdate event.

info

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

RtkUIProvider listens to this event and updates the state accordingly and then emits a rtkStatesUpdate 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, RtkUIProvider } from '@cloudflare/realtimekit-react-ui';

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

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