react-splitter-light
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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.

Package Sidebar

Install

npm i react-splitter-light

Weekly Downloads

637

Version

1.0.3

License

MIT

Unpacked Size

101 kB

Total Files

9

Last publish

Collaborators

  • kruglay