react-multi-pane-split

A flexible and resizable split-pane component for React.

Installation

npm install react-multi-pane-split

OR

yarn add react-multi-pane-split

Basic working Code Example

import React from 'react';
import SplitPane from 'react-multi-pane-split';

const App = () => {
  return (
    <SplitPane>
      <div>Pane 1</div>
      <div>Pane 2</div>
    </SplitPane>
  );
};

export default App;

Props

Prop | Description | Default Value --- | --- | --- | direction | Specifies the direction of splitting (horizontal or vertical) | horizontal initialSizes | Initial sizes of each pane in pixels | Screen width or height (based on direction) divided equally minSize Minimum | size in pixels that each pane can be resized to | 10 dividerClass | CSS class for the divider between panes |"" (none) paneItemClass | CSS class for each pane item| "" (none) className | Additional CSS class for the split-pane container | "" (none) onDragStart | Callback function invoked when dragging starts | undefined onDrag | Callback function invoked during dragging | undefined onDragEnd | Callback function invoked when dragging ends | undefined