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.

<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.

<DragAndDock.Dock>

• Panels "dock" into Docks.

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.