Customize Control Bar

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

RealtimeKit's default header component RtkControlbar can be used as the following.

<RtkControlbar />

Following code shows you can customise the RtkControlbar as per your use case.

function ControlBarWithCustomUI() {
  const fullScreenTargetElement = document.querySelector(
    '#root',
  );

  const states = useStatesStore((s) => s.states);

  return (
    <div className="flex w-full py-2 px-3 text-white justify-between">
      <div
        id="controlbar-left"
        className="flex items-center overflow-visible justify-center"
      >
        <RtkFullscreenToggle targetElement={fullScreenTargetElement} />
        <RtkSettingsToggle />
        <RtkScreenShareToggle />
      </div>
      <div
        id="controlbar-center"
        className="flex items-center overflow-visible justify-center"
      >
        <RtkMicToggle />
        <RtkCameraToggle />
        <RtkStageToggle />
        <RtkLeaveButton />
        <RtkMoreToggle>
          <div slot="more-elements">
            <RtkPipToggle variant="horizontal" />
            <RtkMuteAllButton variant="horizontal" />
            <RtkBreakoutRoomsToggle variant="horizontal" />
            <RtkRecordingToggle variant="horizontal" />
          </div>
        </RtkMoreToggle>
      </div>
      <div
        id="controlbar-right"
        className="flex items-center overflow-visible justify-center"
      >
        <RtkChatToggle />
        <RtkPollsToggle />
        <RtkParticipantsToggle />
        <RtkPluginsToggle />
        <RtkControlbarButton
          icon={defaultIconPack.add}
          label="Open Custom Sidebar"
          onClick={(e) => {
            // we are reusing the sidebar state to work with a custom sidebar item
            e.currentTarget.dispatchEvent(
              new CustomEvent('rtkStateUpdate', {
                detail: {
                  activeSidebar: !states.activeSidebar,
                  sidebar: 'warnings',
                },
                bubbles: true,
                composed: true,
              }),
            );
          }}
        />
      </div>
    </div>
  );
}