ConstIncludes the three built-in layouts:
Use this constant when extending the default layouts with custom options. If you want to completely replace the layouts, create your own array without spreading this constant.
Extend with custom layouts:
import { DEFAULT_LAYOUTS, LayoutDefinition } from '@hiyve/react-ui';
import { Slideshow, PictureInPicture } from '@mui/icons-material';
const myLayouts: LayoutDefinition[] = [
...DEFAULT_LAYOUTS,
{ id: 'presentation', label: 'Presentation', icon: <Slideshow /> },
{ id: 'pip', label: 'Picture-in-Picture', icon: <PictureInPicture /> },
];
<ControlBar layouts={myLayouts} />
Use in internationalized applications:
import { DEFAULT_LAYOUTS } from '@hiyve/react-ui';
// Create localized layouts based on DEFAULT_LAYOUTS structure
const localizedLayouts = DEFAULT_LAYOUTS.map(layout => ({
...layout,
label: t(`layouts.${layout.id}`), // e.g., 'layouts.grid'
}));
LayoutDefinition - Interface for layout definitions
Default layout definitions for the video grid.