Package Exports

split-pane-react
split-pane-react/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (split-pane-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
React16.8 version at least, and React18 version at the same time
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 React, { useState } from 'react';
import SplitPane, { Pane } from 'split-pane-react';
import 'split-pane-react/esm/themes/default.css';

function App () {
  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' }}>
          pane3
        </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 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.