react-mosaic-component

import React, { useState } from 'react'; import { Mosaic, MosaicWindow, getpathFromNode, createBalancedTreeFromElement, MosaicParent, MosaicBranch } from 'react-mosaic-component'; import 'react-mosaic-component/src/example/index.css'; // Minimal example styles type MyMosaicKey = 'a' | 'b' | 'c' | 'd'; const ELEMENT_MAP: Record<MyMosaicKey, JSX.Element> = { a: <div>Panel A Content</div>, b: <div>Panel B Content</div>, c: <div>Panel C Content</div>, d: <div>Panel D Content</div>, }; const createInitialLayout = () => { // In v7.0.0-beta0, the tree structure is n-ary: return { direction: 'row', children: [ 'a', { direction: 'column', children: ['b', 'c'] }, 'd' ] } satisfies MosaicParent<MyMosaicKey>; // For v6.x and earlier, use the binary tree format: // return { direction: 'row', first: 'a', second: { direction: 'column', first: 'b', second: 'c' } } as MosaicParent<MyMosaicKey>; }; export default function MyMosaicApp() { const [currentLayout, setCurrentLayout] = useState<MosaicNode<MyMosaicKey>>(() => createInitialLayout()); const renderTile = (id: MyMosaicKey, path: MosaicBranch[]) => ( <MosaicWindow<MyMosaicKey> path={path} createNode={() => 'new'} title={`Window ${id}`}> {ELEMENT_MAP[id]} </MosaicWindow> ); return ( <div style={{ width: '100vw', height: '100vh', display: 'flex' }}> <Mosaic<MyMosaicKey> renderTile={renderTile} initialValue={currentLayout} onChange={setCurrentLayout} zeroStateView={<div>Drag a new window here</div>} /> </div> ); }