split-pane-ceshi

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';

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

** Pane **

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

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/dist/themes/default.css'

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

import 'split-pane-react/dist/themes/theme1.css'

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

import 'split-pane-react/dist/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.