Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

split-pane-react

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

split-pane-react

Resizable split panes for React.js.

  • 0.1.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.1K
increased by11.72%
Maintainers
1
Weekly downloads
 
Created
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

Package last updated on 04 Nov 2022

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc