dockview

dockview

Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support

---

A zero dependency layout manager based on the layering of split-view components with ReactJS support. View the live demo here. Automatically generated TypeDocs can be found here.

Installation

You can install the project from npm. The project comes with TypeScript typings.

npm install --save dockview

Configuration

You must import the core css stylesheet but you are free to supply your own theming in addition to the core stylesheet. The location to reference for the stylesheet is

dockview/dist/styles.css

By default the seperator between panels is transparent but this can be set through the CSS varibable --separator-border. Alternatively, or if you require the DockviewReact you should attach the classname of an included theme; either dockview-theme-dark or dockview-theme-light.

FAQ

• The panel or grid isn't appearing
  • Have you called api.layout(...)?
  • The grid need to be provided with a width and height to layout correctly.
  • If you are nesting panels and grids you can get the panels current dimensions through the panels api api.onDimensionsChanged(({width,height} => {...}))
  • The top level view should probably be set as a function of the window resize event.

Sandbox examples

• Dockview
• Gridview
• Splitview
• Paneview

React

dockview has a peer dependency on react >= 16.8.0 and react-dom >= 16.8.0 which is the version that introduces React Hooks.

Splitview

import { 
    ISplitviewPanelProps, 
    Orientation, 
    SplitviewReact,
    SplitviewReadyEvent
} from "dockview";

const components = {
    "my-component": (props: ISplitviewPanelProps) => {
        return (
            <div>
                <span>This is a panel</span>
                <span>{props.arbitraryProp}</span>
            </div>
        )
    }
}

const Example = () => {
    const onReady = (event: SplitviewReadyEvent) => {
        event.addPanel({
            id: "panel-1",
            component: "my-component",
            params: {
                arbitraryProp: "Hello World"
            }
        });
        event.addPanel({
            id: "panel-2",
            component: "my-component",
            params: {
                arbitraryProp: "World Hello"
            }
        });
    }

    return (
        <SplitviewReact
            components={components}
            onReady={onReady}
            orientation={Orientation.VERTICAL}
        />
    )
}

Run the demo locally