split-pane-react

Resizable split panes for React.js.Check out the live demo.

Features

• 💪Simple api and support for multiple panels
• 🔥Supports vertical & horizontal layouts and fluid pane.
• 🎉Use controlled component mode, flexible use
• 😎React16.8 version at least, and React18 version at the same time
• 👷‍♂️Built in different themes

Installing

1# use npm
2npm install split-pane-react
3
4# or if you use yarn
5yarn add split-pane-react

Example Usage

1import React, { useState } from 'react';
2import SplitPane, { Pane } from 'split-pane-react';
3import 'split-pane-react/esm/themes/default.css';
4
5function App () {
6  const [sizes, setSizes] = useState([100, '30%', 'auto']);
7
8  const layoutCSS = {
9    height: '100%',
10    display: 'flex',
11    alignItems: 'center',
12    justifyContent: 'center'
13  };
14
15  return (
16    <div style={{ height: 500 }}>
17      <SplitPane
18        split='vertical'
19        sizes={sizes}
20        onChange={setSizes}
21      >
22        <Pane minSize={50} maxSize='50%'>
23          <div style={{ ...layoutCSS, background: '#ddd' }}>
24            pane1
25          </div>
26        </Pane>
27        <div style={{ ...layoutCSS, background: '#d5d7d9' }}>
28          pane2
29        </div>
30        <div style={{ ...layoutCSS, background: '#a1a5a9' }}>
31          pane3
32        </div>
33      </SplitPane>
34    </div>
35  );
36};

props

** SplitPane **

Property	Description	Type	Default
split	Determine layout of panes.	'vertical' |'horizontal'	'vertical'
sizes	Collection of different panel sizes,Only support controlled mode, so it's required	(string | number)[]	[]
resizerSize	Specify the size for resizer	number	4
allowResize	Should allowed to resized	boolean	true
className	split pane custom class name	string	void
sashRender	User defined sliding axis function	(index: number, active: boolean) => void	void
performanceMode	High performance mode to avoid excessive pressure on the browser	boolean	false
onChange	Callback of size change	(sizes: number[]) => void	void
onDragStart	This callback is invoked when a drag starts	() => void	void
onDragEnd	This callback is invoked when a drag ends	() => void	void

** Pane **

Property	Description	Type	Default
className	pane class name	string	void
minSize	Limit the minimum size of the panel	string | number	void
maxSize	Limit the maximum size of this panel	string|number	void

themes

You can use the sashRender parameter to configure the theme you need:

• The default theme style refers to vscode style
• At the same time, we have built in a theme similar to sublime

License

split-pane-react licensed under MIT.

PS: I would love to know if you're using split-pane-react. If you have any use problems, you can raise the issue, and I will repair them as soon as possible. This project will be maintained for a long time. If you have a good idea, you can propose a merge.