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.
You can install the project from npm. The project comes with TypeScript typings.
npm install --save dockview
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
.
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}
/>
)
}
Author: mathuo
Source Code: https://github.com/mathuo/dockview
#reactjs #react #javascript