Socket
Socket
Sign inDemoInstall

react-splitter-light

Package Overview
Dependencies
2
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-splitter-light


Version published
Weekly downloads
489
decreased by-31.03%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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

PropertyDescriptionTypeDefault
modeDetermine 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.number6px
resizableSpecifies whether the panel should be resizable.booleantrue
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
onResizeCallback invoked when the size changes.(sizesInUnits: number[], sizes: number[]) => voidnone
discreteSpecifies the movement of the runner.boolean or numberfalse
onDragStartThis 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[]) => voidnone
onDragEndThis 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[]) => voidnone
actionOnContainerResizeSpecifies whether to invoke the onResize callback when the Splitter container size changes.booleanfalse
runnerStyleProvides the style for the runner.CSSPropertiesnone
runnerClassNameProvides the class name for the runner.stringnone
splitterStyleProvides the style for the splitter.CSSPropertiesnone
splitterClassNameProvides the class name for the splitter.stringnone
paneClassNameProvides the class name for the panel.stringnone

License

react-splitter-light is licensed under the MIT.

Keywords

FAQs

Last updated on 28 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc