React Drag and Dock

Create free-floating panels that "dock" into designated docks. Panel docking does not cause its children to remount.

Contents

• Demos
• Install
• How It Works
• Examples
• API
• Development

Demos

Dock area

Custom layout

Install

npm i react-drag-and-dock

How It Works

When a Panel docked, the position of the Dock is determined using Element.getBoundingClientRect(). Then the Panel height, width, and position are changed. All positions are relative to document.body.

To the user, the Panel appears to be inside the Dock. In reality, the Panel is actually on top of the Dock.

Examples

Dock area

Dock areas are a simple, opinionated way to create a layout with docks.

import React, { Component } from 'react';
import DragAndDock from 'react-drag-and-dock';
 
const App = () => {
  render() {
    return (
      <div
        style={{
          background: 'lightblue',
          display: 'flex',
          flexDirection: 'column',
          height: '100vh',
        }}
      >
        <DragAndDock.Area>
          <DragAndDock.Area.Center>
            <div style={{ height: '100%', width: '100%' }}>hello</div>
          </DragAndDock.Area.Center>
 
          <DragAndDock.Area.Dock location="left" width={300} />
          <DragAndDock.Area.Dock location="right" width={300} />
 
          <DragAndDock.Area.Panel title="Panel 1" initialDockUid="left">
            <div>I am panel 1</div>
          </DragAndDock.Area.Panel>
 
          <DragAndDock.Area.Panel title="Panel 2" defaultPosition={{ x: 400, y: 100 }}>
            <div>I am panel 2</div>
          </DragAndDock.Area.Panel>
        </DragAndDock.Area>
      </div>
    );
  }
}
 
export default Example;

Two docks and one panel

import React from 'react';
import DragAndDock from 'react-drag-and-dock';
 
const App = () => {
    return (
        <div style={{ display: 'grid', gridTemplateColumns: '3fr 4fr 2fr', height: '80vh' }}>
            <DragAndDock.Provider>
                <DragAndDock.Dock>
                    <div style={{ background: '#D0E4FB', height: '100%' }}>I am a dock</div>
                </DragAndDock.Dock>
 
                <div />
 
                <DragAndDock.Dock>
                    <div style={{ background: '#D0E4FB', height: '100%' }}>I am a dock</div>
                </DragAndDock.Dock>
 
                <DragAndDock.Panel title="Panel">
                    <div>Drag me into a dock.</div>
                </DragAndDock.Panel>
            </DragAndDock.Provider>
        </div>
    );
};

Start docked in dock

Give the Dock an id, and then set initialDockUid on the Panel to the same value.

import React from 'react';
import DragAndDock from 'react-drag-and-dock';
 
const App = () => {
    return (
        <div>
            <DragAndDock.Provider>
                <DragAndDock.Dock uid="dock-1">
                    <div style={{ background: '#ddd', height: '80vh', width: '50vw' }}>
                        I am a dock
                    </div>
                </DragAndDock.Dock>
 
                <DragAndDock.Panel initialDockUid="dock-1" title="Panel">
                    <div>yo</div>
                </DragAndDock.Panel>
            </DragAndDock.Provider>
        </div>
    );
};

API

<DragAndDock.Area>

• Used to create a simple, opinionated dock layout.
• Demo

<DragAndDock.Area.Center>

• Required.
• Center content.
• Not dockable.

<DragAndDock.Area.Dock>

• Dockable area.

name	type	default	description
location	string	null	Can only be "left" or "right".
width	number	null	Width in pixels.

<DragAndDock.Area.Dock>

• See <DragAndDock.Panel>.

<DragAndDock.Provider>

• Docks and Panels must be decendents of the Provider.
• But they don't need to be direct descendents.

<DragAndDock.Panel>

• Draggable, free-floating Panel.

name	type	default	description
defaultHeight	number	null	Panel height on initial load. Does nothing after the Panel is docked.
defaultPosition	object {x:number,y:number}	undefined	Position (x and y, relative to body) on initial load. Does nothing after the Panel is docked.
defaultWidth	number	null	Panel width on initial load. Does nothing after the Panel is docked.
initialDockUid	string	null	On initial load, which Dock to snap to. Must correspond to the id of an existing Dock.
renderTitleBar	function	null	Render a custom title bar component. Passes an object with the following properties: draggableClassName -- Put on the element which should be "draggable". styles -- Style object. title -- Panel title.
styles	object	{}	Each property is the JSX style prop for a different "part" of the Panel. handle -- Handle at the top. root -- Wrapper container.
title	string	"Panel"	Text which appears in the handle at the top.

<DragAndDock.Dock>

• Panels "dock" into Docks.

name	type	default	description
uid	string	null	Only used for initialDockUid prop in Panel.

Development

1. Run npm start to watch the src files and launch the sandbox server at http://localhost:3010.
2. Change source code in src folder.
3. Change sandbox code in sandbox/src folder.
   • Don't edit the files in sandbox/src/DragAndDock. The src folder is copied into in on change.