1.3.2 • Published 10 months ago
react-multi-pane-split v1.3.2
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 |