# Split
[](https://jaywcjlove.github.io/#/sponsor)
[](https://www.npmjs.com/package/@uiw/react-split)
[](https://github.com/uiwjs/react-split/actions/workflows/ci.yml)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-split/file/README.md)
[](https://www.npmjs.com/package/@uiw/react-split)
[](https://uiwjs.github.io/react-split/coverage/lcov-report/)
[](https://gitpod.io/#https://github.com/uiwjs/react-split)
[](https://github.com/uiwjs/react-split/network/dependents)
A piece of content can be divided into areas that can be dragged to adjust the width or height.
```jsx
import { Split } from 'uiw';
```
`@uiw/react-split` extracted from the component library `uiw` can be used alone.
```jsx
import Split from '@uiw/react-split';
```
### Basic usage
> ~~By setting the `minWidth` style of the child node, you can set the minimum drag width value. By setting the child node style `flexBasis` style, you can set the proportion width of the default split content.~~
- Fixed initial width or height, which can be calculated by setting the child node, style `width: '80%'` to 100% width.
- Drag to the minimum width, you can achieve the effect by setting the child node style `minWidth: 30`.
- By default, the style `width` is not set, and a child node style needs to be set to `flex: 1` to adapt
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Right Pane
test
Right Pane
);
export default Demo;
```
### Available for layout
Setting `visible={false}` disables the drag bar, which can be used for layout.
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
);
export default Demo;
```
### nested use
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Top Pane
Left Pane
Right Pane
Right Pane
);
export default Demo;
```
### Drag tool not showing
The following example sets whether the drag tool is visible by setting the value of `visiable`.
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
Left Pane
Right Pane
Pane 1
Pane 2
Pane 3
Pane 4
Pane 5
);
export default Demo;
```
### Disable drag and drop
Disable drag tool dragging by setting the value of `disable`.
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';
const Demo = () => (
);
export default Demo;
```
## Props
```ts
export interface SplitProps extends Omit, 'onDragEnd'> {
style?: React.CSSProperties;
className?: string;
prefixCls?: string;
/**
* Drag width/height change callback function,
* the width or height is determined according to the mode parameter
*/
onDragging?: (preSize: number, nextSize: number, paneNumber: number) => void;
/** Callback function for dragging end */
onDragEnd?: (preSize: number, nextSize: number, paneNumber: number) => void;
/** Support custom drag and drop toolbar */
renderBar?: (props: React.HTMLAttributes) => JSX.Element;
/** Set the drag and drop toolbar as a line style. */
lineBar?: boolean;
/** Set the dragged toolbar, whether it is visible or not */
visible?: boolean | number[];
/**
* @deprecated Use `visible` instead
*/
visiable?: boolean | number[];
/**
* Set the drag and drop toolbar, disable
*/
disable?: boolean | number[];
/**
* type, optional `horizontal` or `vertical`
*/
mode?: 'horizontal' | 'vertical';
}
```
## Development
Runs the project in development mode.
```bash
# Step 1, run first, listen to the component compile and output the .js file
npm run watch
npm run build
# Step 2, development mode, listen to compile preview website instance
npm run doc
```
**production**
Builds the app for production to the build folder.
```bash
npm run released
```
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
### License
Licensed under the MIT License.
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
### License
Licensed under the MIT License.