{"library":"react-mosaic-component","title":"React Mosaic Component","description":"React Mosaic is a robust tiling window manager for React applications, enabling developers to create complex, customizable split-pane layouts. It provides a declarative API for defining and managing workspace configurations, supporting dynamic resizing, reordering, and adding/removing of individual panes. The package's current stable release series is 6.x (latest 6.1.1), while a significant beta release, 7.0.0-beta0, introduces a new n-ary tree structure and updated type system for React 19 compatibility. React Mosaic differentiates itself by offering deep programmatic control over the layout tree, making it ideal for applications requiring highly flexible and user-definable interfaces, such as IDEs or dashboards. It ships with comprehensive TypeScript types and supports React versions 16 through 19 as a peer dependency.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-mosaic-component"],"cli":null},"imports":["import { Mosaic } from 'react-mosaic-component';","import { MosaicWindow } from 'react-mosaic-component';","import type { MosaicNode } from 'react-mosaic-component';","import { convertLegacyToNary } from 'react-mosaic-component';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Mosaic, MosaicWindow, getpathFromNode, createBalancedTreeFromElement, MosaicParent, MosaicBranch } from 'react-mosaic-component';\nimport 'react-mosaic-component/src/example/index.css'; // Minimal example styles\n\ntype MyMosaicKey = 'a' | 'b' | 'c' | 'd';\n\nconst ELEMENT_MAP: Record<MyMosaicKey, JSX.Element> = {\n  a: <div>Panel A Content</div>,\n  b: <div>Panel B Content</div>,\n  c: <div>Panel C Content</div>,\n  d: <div>Panel D Content</div>,\n};\n\nconst createInitialLayout = () => {\n  // In v7.0.0-beta0, the tree structure is n-ary:\n  return {\n    direction: 'row',\n    children: [\n      'a',\n      { direction: 'column', children: ['b', 'c'] },\n      'd'\n    ]\n  } satisfies MosaicParent<MyMosaicKey>;\n  // For v6.x and earlier, use the binary tree format:\n  // return { direction: 'row', first: 'a', second: { direction: 'column', first: 'b', second: 'c' } } as MosaicParent<MyMosaicKey>;\n};\n\nexport default function MyMosaicApp() {\n  const [currentLayout, setCurrentLayout] = useState<MosaicNode<MyMosaicKey>>(() => createInitialLayout());\n\n  const renderTile = (id: MyMosaicKey, path: MosaicBranch[]) => (\n    <MosaicWindow<MyMosaicKey> path={path} createNode={() => 'new'} title={`Window ${id}`}>\n      {ELEMENT_MAP[id]}\n    </MosaicWindow>\n  );\n\n  return (\n    <div style={{ width: '100vw', height: '100vh', display: 'flex' }}>\n      <Mosaic<MyMosaicKey>\n        renderTile={renderTile}\n        initialValue={currentLayout}\n        onChange={setCurrentLayout}\n        zeroStateView={<div>Drag a new window here</div>}\n      />\n    </div>\n  );\n}","lang":"typescript","description":"Demonstrates a basic multi-panel Mosaic layout with initial state, dynamic rendering of panes, and state management. Includes conditional logic for v6.x vs v7.x layout structures.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}