Resizable split panes for React.js.
npm install split-pane-react-testsh
use npm
npm install split-pane-react
or if you use yarn
yarn add split-pane-react
``
Example Usage
`jsx
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 (
split='vertical'
sizes={sizes}
onChange={setSizes}
>
pane1
pane2
pane2
);
};
`
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:
``js
import 'split-pane-react/esm/themes/default.css';
``
* The style1 theme style refers to sublime style,The reference path is as follows:
``js
import 'split-pane-react/esm/themes/theme1.css';
``
* The style 2 theme has a permanent axis,The reference path is as follows:
``js
import 'split-pane-react/esm/themes/theme2.css';
```