github.com/bokuweb/react-sortable-pane @v1.0.2

Sortable and resizable pane component for react.

Table of Contents

• Screenshot
• Live Demo
• Storybook
• CodeSandbox
• Install
• Usage
• uncontrolled
• controlled
• Props
• SortablePaneComponent
• PaneComponent
• Test
• Changelog
• License

Screenshot

Live Demo

Storybook

Storybook

CodeSandbox

CodeSandbox(Uncontrolled)

Install

npm i react-sortable-pane

or

yarn add react-sortable-pane

Usage

Uncontrolled

If you need not to control SortablePane state, please use defaultSize and defaultOrder.

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

export default function SimpleUncontrolledExample() {
  const panes = [0, 1, 2].map(key => (
    <Pane key={key} defaultSize={{ width: '100%', height: 120 }}>
      00{key}
    </Pane>
  ));
  return (



      <SortablePane direction="vertical" margin={20} defaultOrder={['0', '1', '2']}>
        {panes}
      </SortablePane>



  );
}

Controlled

If you need to control SortablePanestate by yourself, please use size and order.

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

type State = {
  order: string[];
  panes: { [key: string]: { height: number } };
};

export default class SimpleControlledFullExample extends React.Component<{}, State> {
  state = {
    order: ['2', '1', '0'],
    panes: { '0': { height: 100 }, '1': { height: 200 }, '2': { height: 300 } },
  };

  render() {
    const panes = [0, 1, 2].map(key => (
      <Pane key={key} size={{ width: '100%', height: this.state.panes[key].height }}>
        00{key}
      </Pane>
    ));
    return (



        <SortablePane
          direction="vertical"
          margin={20}
          order={this.state.order}
          onOrderChange={order => {
            this.setState({ order });
          }}
          onResizeStop={(e, key, dir, ref, d) => {
            this.setState({
              panes: { ...this.state.panes, [key]: { height: this.state.panes[key].height + d.height } },
            });
          }}
        >
          {panes}
        </SortablePane>



    );
  }
}

Props

SortablePaneComponent

PaneComponent