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
# use npm
npm install react-splitter-light
# or if you use yarn
yarn add react-splitter-light
Example Usage
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.
demo
Here you can findprops
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 is licensed under the MIT.