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.
- Storybook demo here.
- Code examples here.
- Generated TypeDocs can be found here.
Want to inspect the deployed package? Go to https://unpkg.com/browse/dockview@latest/
Features
- Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with dockable and tabular views
- Extensive API support at the component level and at the indivdual view level
- Themable and customizable
- Serialization / deserialization
- Tabular views with Drag and Drop support
- Documentation and examples
Installation
You can install the project from npm. The project comes with TypeScript typings.
npm install --save dockview
Setup
You must import or reference the stylesheet at dockview/dist/styles/dockview.css. For example:
@import '~dockview/dist/styles/dockview.css';
You should also attach a dockview theme to an element containing your components. For example:
<body classname="dockview-theme-light">
</body>
dockview has a peer dependency on react >= 16.8.0 and react-dom >= 16.8.0 which is the version that introduced React Hooks.
FAQ
Can I use this library without React?
In theory, yes. The library is written in plain-old JS and the parts written in ReactJS are merely wrappers around the plain-old JS components. Currently everything is published as one package though so maybe that's something to change in the future.
Can I use this library with AngularJS/Vue.js or any other arbitrarily named JavaScript library/framework?
Yes but with some extra work. Dockview is written in plain-old JS so you can either interact directly with the plain-old JS components or create a wrapper using your prefered library/framework. The React wrapper may give some ideas on how this wrapper implementation could be done for other libraries/frameworks. Maybe that's something to change in the future.