Sortable and resizable pane component for React

by React

react-sortable-pane

Sortable and resizable pane component for react.

Live Demo

http://bokuweb.github.io/react-sortable-pane

Install

npm i react-sortable-pane

or

yarn add react-sortable-pane

Usage

import React from 'react';
import { SortablePane, Pane } from 'react-sortable-pane';

export default () => {
  return (
    <div>
      <SortablePane
        direction="horizontal"
        margin={20}    
      >
        <Pane id={0} key={0} width={120} height="100%">
          <p>0</p>
        </Pane>
        <Pane id={1} key={1} width={120} height="100%">
          <p>1</p>
        </Pane>          
      </SortablePane>
    </div>
  );
};

Props

SortablePane Component

className?: string

The className property is used to set the css classname of a component.

style?: {[key: string]: string }

The style property is used to set the style of a component.

direction?: 'horizontal' | 'vertical'

The direction property is used to set the direction of a component.
If omitted the default direction is 'horizontal'.

margin?: number

The margin property is used to set the margin between Pane component.
If omitted the default margin is 0.

zIndex?: number

The zIndex property is used to set the zIndex of a component.
If omitted the default margin is 100.

grid?: Array<number>;

The grid property is used to specify the increments that resizing should snap to. Defaults to [1, 1].

isSortable?: boolean

The isSortable property is used to control whether panes can be dragged or not.
If omitted, the default value is true.

disableEffect?: boolean

The disableEffect property is used to disable floating effect.
If omitted the default margin is false.

onOrderChange?: (oldPanes: PaneProperty[], newPanes: PaneProperty[]) => void

It is called when Pane component order changed.

PaneProperty definition is below.

type PaneProperty = $Exact<{
  id: PaneId;
  width: number | string;
  height: number | string;
  order: number;
}>

onResizeStart?: (e: SyntheticMouseEvent | SyntheticTouchEvent, id: PaneId, panes: PaneProperty[]) => void

It is called when Pane component resize start.

onResize?: (e: SyntheticMouseEvent | SyntheticTouchEvent, id: PaneId, panes: PaneProperty[], data: PaneResizeData) => void

It is called when Pane component resize.

PaneResizeData definition is below.

type PaneResizeData = $Exact<{
  pane: PaneProperty;
  direction: $Values<typeof directionDict>; // 'x' | 'y' | 'xy'
  delta: PaneSize;                          // { width: number; height: number }
}>

onResizeStop?: (e: SyntheticMouseEvent | SyntheticTouchEvent, id: PaneId, panes: PaneProperty[], data: PaneResizeData) => void

It is called when Pane component resize stop.

PaneResizeData definition is below.

type PaneResizeData = $Exact<{
  pane: PaneProperty;
  direction: $Values<typeof directionDict>; // 'x' | 'y' | 'xy'
  delta: PaneSize;                          // { width: number; height: number }
}>

onDragStart?: (e: SyntheticMouseEvent | SyntheticTouchEvent, id: PaneId, panes: PaneProperty[]) => void

It is called when Pane component dragging starts.

onDragStartStop?: (e: SyntheticMouseEvent | SyntheticTouchEvent, id: PaneId, panes: PaneProperty[]) => void

It is called when Pane component dragging stop.

Pane Component

id: string | number

The id property is used to Pane component id.

width: number | string

The width property is used to set the width of a Pane component.
For example, it can be 300, '300px', or 50%.

height: number | string

The height property is used to set the width of a Pane component.
For example, it can be 300, '300px', or 50%.

minWidth?: number

The minWidth property is used to set the minimum width of a Pane component.

minHeight?: number

The minHeight property is used to set the minimum height of a Pane component.

maxWidth?: number

The maxWidth property is used to set the maximum width of a Pane component.

maxHeight?: number

The maxHeight property is used to set the maximum height of a Pane component.

className?: string

The className property is used to set the css classname of a Pane component.

style?: {[key: string]: string }

The style property is used to set the style of a Pane component.

isResizable?: { x: boolean, y: boolean, xy: boolean }

The isResizable property is used to set the resizable permission of a component.

The permission of x, y, xy direction resizing.
If omitted the default value is { x: true, y: true, xy: true }.
If you want to permit only x direction resizing, please set { x: true, y: false, xy: false }.

Changelog

V0.6.6

  • Add grid props. (#93)

V0.6.5

  • Update README.

V0.6.4

  • Fix Bug, onResizeStart and onResizeStop not fired.

V0.6.2

  • Use flowtype
  • Use rollup
  • Change callback I/F

V0.5.5

  • Use prop-types package.
  • Fix #56 thanks @avaskys.

V0.5.4

  • Support server side rendering. #50 thanks @lazreg87

V0.5.3

  • Fix componentDidUpdate argument, use this.props instaead of prev.

V0.5.2

  • Use babel-preset-es2015-ie babel-preset-es2015-ie #47 thanks @PabloDiablo

V0.5.1

  • update readme

V0.5.0

  • Fixes a nasty bug
  • Add isResizable props to Pane component
  • Set user-select: none when resizeing or moving.
  • Add zIndex props.
  • update example

V0.4.1

  • Fixes a nasty bug where all Panes could end up sharing the same static style #44 (thanks @ara4n)

V0.4.0

  • Add Object.assign transform plugin
  • Add add-module-exports plugin

V0.3.2

  • Allow strings for width and height. (thanks @lanVS)
  • Add onDragStart and onDragEnd props. (thanks @lanVS)

V0.3.1

  • Add isSortable props. (#34 thanks @lanVS)

V0.3.0

  • Change sort trigger position (#40 thanks @lanVS)

V0.2.12

  • Update react-motion(use "^0.4.3")

V0.2.10, V0.2.11

  • Fix order update bug

V0.2.8

  • Fix size updater bug

V0.2.7

  • Fix size updater bug

V0.2.6

  • Fix order bug
  • Update react-resizable-box(^1.2.0)

V0.2.5

  • Add order props to change order by parent component.
  • Add husky and prepush hook.

V0.2.4

  • update packages to support react v15

V0.2.3

  • update pane size when props.width/height updated.

V0.2.2

  • Fix className bug.

V0.2.1

  • Update resizable box component.

V0.2.0

  • Support pane appen and remove.
  • Support vertical mode.
  • Fix pane size calculator.

V0.1.2

  • Add onOrderChange callback.
  • Add disableEffect props.
  • Fix eslint error.

V0.1.1

  • Add onResize callback.

V0.1.0

publised.

GitHub