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

    Interface LayoutDefinition

    Definition of a layout option for the video grid.

    Use this interface to define custom layouts beyond the built-in 'grid', 'speaker', and 'sidebar' options. Custom layouts allow developers to add application-specific video arrangements.

    Each layout definition requires:

    • id: Unique string identifier (used as the layout value)
    • label: Human-readable name shown in the layout menu
    • icon: Optional React node for the menu item (defaults to grid icon)
    1. Define your layouts array with LayoutDefinition objects
    2. Pass the array to ControlBar via the layouts prop
    3. Handle the custom layout ID in your onLayoutChange callback
    4. Render your custom layout in your video grid component

    Basic custom layout:

    import { LayoutDefinition, DEFAULT_LAYOUTS } from '@hiyve/react-ui';
    import { Slideshow } from '@mui/icons-material';

    const customLayouts: LayoutDefinition[] = [
      ...DEFAULT_LAYOUTS,
      {
        id: 'presentation',
        label: 'Presentation',
        icon: <Slideshow />,
      },
    ];

    <ControlBar
      showLayoutSelector
      layout={layout}
      onLayoutChange={setLayout}
      layouts={customLayouts}
    />

    Completely custom layouts (replacing built-ins):

    const myLayouts: LayoutDefinition[] = [
      { id: 'focus', label: 'Focus Mode', icon: <CenterFocusStrong /> },
      { id: 'theater', label: 'Theater', icon: <Theaters /> },
      { id: 'pip', label: 'Picture-in-Picture', icon: <PictureInPicture /> },
    ];

    <ControlBar layouts={myLayouts} />

    Layout with i18n labels:

    const getLocalizedLayouts = (t: TFunction): LayoutDefinition[] => [
      { id: 'grid', label: t('layouts.grid'), icon: <GridView /> },
      { id: 'speaker', label: t('layouts.speaker'), icon: <Person /> },
      { id: 'sidebar', label: t('layouts.sidebar'), icon: <ViewSidebar /> },
    ];
    • DEFAULT_LAYOUTS from @hiyve/react-ui - The built-in layouts constant
    • LayoutMode - The layout identifier type
    interface LayoutDefinition {
        icon?: ReactNode;
        id: string;
        label: string;
    }
    Index

    Properties

    icon? id label

    Properties

    icon?: ReactNode

    Optional icon displayed next to the label in the menu.

    If not provided, a default grid icon is used. Any React node can be used, including MUI icons, custom SVGs, or emoji.

    import { GridView } from '@mui/icons-material';

    { id: 'grid', label: 'Grid', icon: <GridView /> }
    id: string

    Unique identifier for this layout.

    This ID is used as the value for the layout prop and is passed to onLayoutChange when the user selects this layout.

    { id: 'grid' }      // Built-in grid layout
    { id: 'spotlight' } // Custom spotlight layout
    label: string

    Display label shown in the layout selector menu.

    This is the human-readable name users see when selecting a layout. For i18n support, compute this value from your translation function.

    Settings

    Member Visibility

    On This Page

    Creating Custom LayoutsUsing Custom Layouts
    Properties