react-splitter-light
Version:
A lightweight React component for creating adjustable split views with no extra dependencies.
83 lines (60 loc) • 5.77 kB
Markdown
# react-splitter-light
A lightweight React component for creating adjustable split views with no extra dependencies.
## Features
- **No extra dependencies**.
- **Vertical & horizontal layouts**.
- Supports **React16.8 and later**.
- Support **discrete** moving, making it suitable for use as a **slider**.
## Installing
````sh
# use npm
npm install react-splitter-light
# or if you use yarn
yarn add react-splitter-light
````
## Example Usage
```jsx
import React, {useState} from 'react';
import {Splitter} from 'react-splitter-light';
function App () {
return (
<div style={{ height: 500 }}>
<Splitter>
<div style={{background: 'green', height: '100%'}}>
pane1
</div>
<div style={{background: 'blue', height: '100%'}}>
pane2
</div>
<div style={{background: 'brown', height: '100%'}}>
pane3
</div>
</Splitter>
</div>
);
};
```
Apply **height: 100%** to elements within the Splitter component to ensure they fully occupy the available space within their respective panels.
#### Here you can find [demo](https://kruglay.github.io/rsl-demo/)
## props
**Splitter**
| Property | Description | Type | Default |
|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------:|:----------------:|
| mode | Determine the layout of panes. | 'horizontal' or 'vertical' | 'horizontal' |
| initialSizes(units) | Sets the sizes of panels in units. | number[] | equal parts |
| runnerSize(px) | Specifies the size of the runner. | number | 6px |
| resizable | Specifies whether the panel should be resizable. | boolean | true |
| minSizes(units/px) | Specifies the minimum sizes of panels. If you want specify as a 'px' set as a string or string[]. For example '10px' or ['10px', '12px'] | number/string or number/string[] | 10px |
| maxSizes(units/px) | Specifies the maximum sizes of panels. If you want specify as a 'px' set as a string or string[]. For example '10px' or ['10px', '12px'] | number/string or number/string[] | Number.MAX_VALUE |
| onResize | Callback invoked when the size changes. | (sizesInUnits: number[], sizes: number[]) => void | none |
| discrete | Specifies the movement of the runner. | boolean or number | false |
| onDragStart | This callback is invoked when a drag starts. It provides the indexes of the pair of resizable nearby panels. Fires before adding event listeners. | (event: MouseEvent, indexes: number[]) => void | none |
| onDragEnd | This callback is invoked when a drag ends. It provides the indexes of the pair of resizable nearby panels. Fires after setting new sizes. | (event: MouseEvent, indexes: number[]) => void | none |
| actionOnContainerResize | Specifies whether to invoke the onResize callback when the Splitter container size changes. | boolean | false |
| runnerStyle | Provides the style for the runner. | CSSProperties | none |
| runnerClassName | Provides the class name for the runner. | string | none |
| splitterStyle | Provides the style for the splitter. | CSSProperties | none |
| splitterClassName | Provides the class name for the splitter. | string | none |
| paneClassName | Provides the class name for the panel. | string | none |
## License
**[react-splitter-light](https://github.com/kruglay/react-splitter-light)** is licensed under the [MIT](LICENSE).