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

Run npm start to watch the src files and launch the sandbox server at http://localhost:3010.
Change source code in src folder.
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.

License

amh4r/react-drag-and-dock

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages