Hiyve Components - v1.0.0
    Preparing search index...

    Interface ControlBarRenderProps

    Render props for advanced ControlBar customization.

    Use these to add custom controls or modify default behavior.

    <ControlBar
      renderProps={{
        renderExtraControls: () => (
          <>
            <HandRaiseButton />
            <ReactionButton />
          </>
        ),
        formatDuration: (seconds) => {
          const mins = Math.floor(seconds / 60);
          return `${mins}m`;
        },
      }}
    />
    interface ControlBarRenderProps {
        formatDuration?: (seconds: number) => string;
        renderExtraControls?: () => ReactNode;
        renderSidebarAdjacentControls?: () => ReactNode;
    }
    Index

    Properties

    formatDuration? renderExtraControls? renderSidebarAdjacentControls?

    Properties

    formatDuration?: (seconds: number) => string

    Custom duration formatter for recording time display.

    Type Declaration

      • (seconds: number): string

      • Parameters

        • seconds: number

          Recording duration in seconds

        Returns string

        Formatted duration string

    // Show minutes only
    formatDuration: (seconds) => `${Math.floor(seconds / 60)}m`
    renderExtraControls?: () => ReactNode

    Custom render function for extra controls. These are inserted between the main controls and the leave button.

    Type Declaration

      • (): ReactNode

      • Returns ReactNode

        Custom control elements to render

    renderSidebarAdjacentControls?: () => ReactNode

    Custom controls rendered in the trailing group immediately before the sidebar toggle (far right of the bar). Use to place your own controls directly adjacent to the sidebar button rather than in the main cluster.

    Type Declaration

      • (): ReactNode

      • Returns ReactNode

        Custom control elements to render

    Settings

    Member Visibility

    On This Page

    Properties