split-pane-react

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

Features

Supports vertical & horizontal layouts.
Supports fluid pane.
Use controlled component mode, flexible use
Built in different themes

Installing

# use npm
npm install split-pane-react

# or if you use yarn
yarn add split-pane-react

Example Usage

import SplitPane, { Pane } from 'split-pane-react';
import 'split-pane-react/esm/themes/default.css'

function Basic () {
    const [sizes, setSizes] = useState([
        100,
        '30%',
        'auto',
    ]);

    const layoutCSS = {
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    };

    return (
        <div style={{ height: 500 }}>
            <SplitPane
                split='vertical'
                sizes={sizes}
                onChange={setSizes}
            >
                <Pane minSize={50} maxSize='50%'>
                  <div style={{ ...layoutCSS, background: '#ddd' }}>
                    pane1
                  </div>
                </Pane>
                <div style={{ ...layoutCSS, background: '#d5d7d9' }}>
                    pane2
                </div>
                <div style={{ ...layoutCSS, background: '#a1a5a9' }}>
                    pane2
                </div>
            </SplitPane>
        </div>
    );
};

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
sashClassName	split sash custom class name	string	void
paneClassName	split pane custom class name	string	void
onChange	Callback of size change	(sizes: number[]) => 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

Three different theme styles are built into this component:

The default theme style refers to vscode style,The reference path is as follows:

import 'split-pane-react/esm/themes/default.css';

The style1 theme style refers to sublime style,The reference path is as follows:

import 'split-pane-react/esm/themes/theme1.css';

The style 2 theme has a permanent axis,The reference path is as follows:

import 'split-pane-react/esm/themes/theme2.css';

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 try my best to solve them.

GitHub

View Github