All Projects → mathuo → dockview

mathuo / dockview

Licence: MIT license
Zero dependency layout manager and builder with ReactJS support

Programming Languages

typescript
32286 projects
SCSS
7915 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to dockview

rc-dock
Dock Layout for React Component
Stars: ✭ 318 (+606.67%)
Mutual labels:  drag-and-drop, layout, drag, drop, tabs, dock
vue-simple-upload-component
A simple upload component for Vue.js 2.x
Stars: ✭ 14 (-68.89%)
Mutual labels:  drag-and-drop, drag, drop
drop
A LÖVE visualizer and music player
Stars: ✭ 17 (-62.22%)
Mutual labels:  drag-and-drop, drag, drop
Kddraganddropcollectionview
This component allows for the transfer of data items between collection views through drag and drop
Stars: ✭ 476 (+957.78%)
Mutual labels:  drag-and-drop, drag, drop
DragDropiOS
DragDropiOS is a drag and drop manager on iOS. It supports drag and drop with in one or more classes extends UIView. This library contains UICollectionView and UITableView that implenment of drag and drop manager.
Stars: ✭ 71 (+57.78%)
Mutual labels:  drag-and-drop, drag, drop
solid-dnd
A lightweight, performant, extensible drag and drop toolkit for Solid JS.
Stars: ✭ 251 (+457.78%)
Mutual labels:  drag-and-drop, drag, drop
Smooth Dnd
drag and drop library for javascript
Stars: ✭ 408 (+806.67%)
Mutual labels:  drag-and-drop, drag, drop
image-uploader
Simple Drag & Drop image uploader plugin to static forms, without using AJAX
Stars: ✭ 70 (+55.56%)
Mutual labels:  drag-and-drop, drag, drop
Vue Smooth Dnd
Vue wrapper components for smooth-dnd
Stars: ✭ 1,121 (+2391.11%)
Mutual labels:  drag-and-drop, drag, drop
React Smooth Dnd
react wrapper components for smooth-dnd
Stars: ✭ 1,560 (+3366.67%)
Mutual labels:  drag-and-drop, drag, drop
KanbanDragDropiOS
Kanban Board using Drag & Drop iOS API
Stars: ✭ 95 (+111.11%)
Mutual labels:  drag-and-drop, drag, drop
react-native-dnd-board
A drag and drop Kanban board for React Native.
Stars: ✭ 41 (-8.89%)
Mutual labels:  drag-and-drop, drag, drop
KDRearrangeableCollectionViewFlowLayout
A Drag and Rearrange UICollectionView through its layout
Stars: ✭ 73 (+62.22%)
Mutual labels:  drag-and-drop, drag, drop
dockingpanes
A Visual Studio style docking windows library for Qt Widgets based applications
Stars: ✭ 52 (+15.56%)
Mutual labels:  docking, docking-library, docking-layout
Angular Skyhook
An implementation of react-dnd for Angular.
Stars: ✭ 146 (+224.44%)
Mutual labels:  drag-and-drop, drag, drop
Ng2 Dnd
Angular 2 Drag-and-Drop without dependencies
Stars: ✭ 861 (+1813.33%)
Mutual labels:  drag-and-drop, drag, drop
Gong Wpf Dragdrop
The GongSolutions.WPF.DragDrop library is a drag'n'drop framework for WPF
Stars: ✭ 1,669 (+3608.89%)
Mutual labels:  drag-and-drop, drag, drop
Ngx Smooth Dnd
angular wrapper for smooth-dnd
Stars: ✭ 152 (+237.78%)
Mutual labels:  drag-and-drop, drag, drop
React Fine Uploader
Easily integrate Fine Uploader or Fine Uploader S3 into a React app. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI.
Stars: ✭ 628 (+1295.56%)
Mutual labels:  components, drag-and-drop
React Uploady
Modern file uploading - components & hooks for React
Stars: ✭ 372 (+726.67%)
Mutual labels:  components, drag-and-drop

dockview

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


npm version CI Build Coverage Quality Gate Status Bundle Phobia

Please see the website: https://dockview.dev

Want to inspect the latest deployment? 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 view level
  • Themable and customizable
  • Serialization / deserialization support
  • Tabular docking and Drag and Drop support
  • Documentation and examples

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.

Quick start

Dockview has a peer dependency on react >= 16.8.0 and react-dom >= 16.8.0. You can install dockview from npm. Please see the Getting Started Guide.

npm install --save dockview

Within your project you must import or reference the stylesheet at dockview/dist/styles/dockview.css and attach a theme.

@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>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].