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.

Here you can find 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 is licensed under the MIT.