Socket
Socket
Sign inDemoInstall

split-pane-react

Package Overview
Dependencies
5
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

split-pane-react

Resizable split panes for React.js.


Version published
Maintainers
1
Weekly downloads
5,186
decreased by-12.58%

Weekly downloads

Readme

Source

split-pane-react

Resizable split panes for React.js.Check out the live demo.

Features

  • 💪Simple api and support for multiple panels
  • 🔥Supports vertical & horizontal layouts and fluid pane.
  • 🎉Use controlled component mode, flexible use
  • 😎React16.8 version at least, and React18 version at the same time
  • 👷‍♂️Built in different themes

Installing

# use npm
npm install split-pane-react

# or if you use yarn
yarn add split-pane-react

Example Usage

import React, { useState } from 'react';
import SplitPane, { Pane } from 'split-pane-react';
import 'split-pane-react/esm/themes/default.css';

function App () {
  const [sizes, setSizes] = useState([100, '30%', 'auto']);

  const layoutCSS = {
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  };

  return (
    <div style={{ height: 500 }}>
      <SplitPane
        split='vertical'
        sizes={sizes}
        onChange={setSizes}
      >
        <Pane minSize={50} maxSize='50%'>
          <div style={{ ...layoutCSS, background: '#ddd' }}>
            pane1
          </div>
        </Pane>
        <div style={{ ...layoutCSS, background: '#d5d7d9' }}>
          pane2
        </div>
        <div style={{ ...layoutCSS, background: '#a1a5a9' }}>
          pane3
        </div>
      </SplitPane>
    </div>
  );
};

props

** SplitPane **

PropertyDescriptionTypeDefault
splitDetermine layout of panes.'vertical' |'horizontal''vertical'
sizesCollection of different panel sizes,Only support controlled mode, so it's required(string | number)[][]
resizerSizeSpecify the size for resizernumber4
allowResizeShould allowed to resizedbooleantrue
classNamesplit pane custom class namestringvoid
sashRenderUser defined sliding axis function(index: number, active: boolean) => voidvoid
performanceModeHigh performance mode to avoid excessive pressure on the browserbooleanfalse
onChangeCallback of size change(sizes: number[]) => voidvoid
onDragStartThis callback is invoked when a drag starts() => voidvoid
onDragEndThis callback is invoked when a drag ends() => voidvoid

** Pane **

PropertyDescriptionTypeDefault
classNamepane class namestringvoid
minSizeLimit the minimum size of the panelstring | numbervoid
maxSizeLimit the maximum size of this panelstring|numbervoid

themes

You can use the sashRender parameter to configure the theme you need:

  • The default theme style refers to vscode style
  • At the same time, we have built in a theme similar to sublime

License

split-pane-react licensed under MIT.

PS: I would love to know if you're using split-pane-react. If you have any use problems, you can raise the issue, and I will repair them as soon as possible. This project will be maintained for a long time. If you have a good idea, you can propose a merge.

Keywords

FAQs

Last updated on 04 Nov 2022

Did you know?

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc