react-mui-dockpanel

A DockPanel component library for React MUI that provides perimeter stacking.

What is this?

DockPanel consumes perimeter panes according to the order of JSX. Each Dock takes an area from the rectangle that remains at that point, and the final fill receives the leftover area.

With TypeScript JSX like this (style declarations omitted):

import { Dock, DockPanel } from "react-mui-dockpanel";

export const Workspace = () => (
  <DockPanel>
    <Dock dock="top">top[0]</Dock>
    <Dock dock="right">right[1]</Dock>
    <Dock dock="bottom">bottom[2]</Dock>
    <Dock dock="left">left[3]</Dock>
    <Dock>fill</Dock>
  </DockPanel>
);

The components inside each Dock are laid out like this:

Each component consumes an edge in order, starting from the outermost perimeter and moving toward the center. The remaining area is occupied by the fill pane. Each Dock area naturally follows changes to the outer bounds, so you only need to decide roughly which edge should contain each component to build responsive layouts. This is especially useful for admin-style page designs.

If you know layout rules such as "Windows Forms docking," this should feel familiar.

Features

• Works as a lightweight layout component for React MUI
• Provides logical component layout without complex CSS flex declarations

Installation

npm install react-mui-dockpanel

React and React MUI must also be available. They are listed as peerDependencies, so install those packages manually in your application.

Documentation

More information, see the repository documentation.

License

Under MIT.