Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support
Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support
A zero dependency layout manager based on the layering of splitview with support for ReactJS components, written in TypeScript.
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, splitview and gridview.
Dockview has a peer dependency on react >= 16.8.0 and react-dom >= 16.8.0. You can install dockview from npm.
npm install --save dockview
Within your project 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-dark"></body>
All view components support the methods toJSON(), fromJSON(...) and onDidLayoutChange().
See example here.
The theme can be customized using the below set of CSS properties. You can find the built in themes here which could be used as an example to extend upon or build your own theme.
| CSS Property | Description |
|---|---|
| General | |
| --dv-active-sash-color | The background color a dividing sash during an interaction |
| --dv-separator-border | The color of the seperator between panels |
| Paneview | |
| --dv-paneview-header-border-color | - |
| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
| Dockview -> Dragging | |
| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
| Dockview -> Tabs container | |
| --dv-tabs-and-actions-container-font-size | - |
| --dv-tabs-and-actions-container-height | Default tab height |
| --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - |
| Dockview -> Tabs | (see dockviewComponent.scss) |
| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
| --dv-tab-divider-color | - |
| --dv-tab-close-icon | Default tab close icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
Consider using React.lazy(...) to defer the importing of your panels until they are required. This has the potential to reduce the initial import cost when your application starts.
Q: Can I use this library without React?
A: 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.
Q: Can I use this library with AngularJS/Vue.js or any other arbitrarily named JavaScript library/framework?
A: 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.
FAQs
Zero dependency layout manager supporting tabs, grids and splitviews
The npm package dockview receives a total of 3,609 weekly downloads. As such, dockview popularity was classified as popular.
We found that dockview demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.