Awesome

Dock Layout for React Component

Popup panel as new browser window

Dark Theme

Examples: https://ticlo.github.io/rc-dock/examples
Docs: https://ticlo.github.io/rc-dock
Discord:

Usage

import DockLayout from 'rc-dock'
import "rc-dock/dist/rc-dock.css";

...

defaultLayout = {
  dockbox: {
    mode: 'horizontal',
    children: [
      {
        tabs: [
          {id: 'tab1', title: 'tab1', content: <div>Hello World</div>}
        ]
      }
    ]
  }
};

render() {
  return (
    <DockLayout
      defaultLayout={defaultLayout}
      style={{
        position: "absolute",
        left: 10,
        top: 10,
        right: 10,
        bottom: 10,
      }}
    />
  )
}

use as uncontrolled layout
- set layout object in DockLayout.defaultLayout
use as controlled layout
- set layout object in DockLayout.layout

types

LayoutData 🗎

Property	Type	Comments	Default
dockbox	BoxData	main dock box	empty BoxData
floatbox	BoxData	main float box, children can only be PanelData	empty BoxData

BoxData 🗎

a box is the layout element that contains other boxes or panels

Property	Type	Comments	Default
mode	'horizontal' \| 'vertical' \| 'float'	layout mode of the box
children	(BoxData \| PanelData)[]	children boxes or panels	required

PanelData 🗎

a panel is a visiaul container with tabs button in the title bar

Property	Type	Comments	Default
tabs	TabData[]	children tabs	required
panelLock	PanelLock	addition information of a panel, this prevents the panel from being removed when there is no tab inside, a locked panel can not be moved to float layer either

TabData 🗎

Property	Type	Comments	Default
id	string	unique id	required
title	string \| ReactElement	tab title	required
content	ReactElement \| (tab: TabData) => ReactElement	tab content	required
closable	bool	whether tab can be closed	false
group	string	tabs with different tab group can not be put in same panel, more options for the group can be defined as TabGroup in DefaultLayout.groups

DockLayout API

get the ref of the DockLayout component to use the following API

saveLayout 🗎

save layout

saveLayout(): SavedLayout

loadLayout 🗎

load layout

 loadLayout(savedLayout: SavedLayout): void

dockMove 🗎

move a tab or a panel, if source is already in the layout, you can use the find method to get it with id first

dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData, direction: DropDirection): void;

find 🗎

find PanelData or TabData by id

find(id: string): PanelData | TabData;

updateTab 🗎

update a tab with new TabData

returns false if the tab is not found

updateTab(id: string, newTab: TabData): boolean;