Socket
Socket
Sign inDemoInstall

react-multi-split-pane

Package Overview
Dependencies
6
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-multi-split-pane

React multi split-pane component


Version published
Maintainers
1
Weekly downloads
1,527
decreased by-12.69%

Weekly downloads

Readme

Source

React Multi Split Pane

NPM version NPM license

Fork of react-split-pane with support for more than two panes.

Installing

npm install react-multi-split-pane

# or if you use yarn

yarn add react-multi-split-pane

Example Usage

<SplitPane split="vertical" minSize={50}>
    <div></div>
    <div></div>
    <div></div>
</SplitPane>
<SplitPane split="vertical" minSize={50}>
    <div></div>
    <SplitPane split="horizontal">
        <div></div>
        <div></div>
    </SplitPane>
</SplitPane>

Differences from react-split-pane

Much of the code has been rewritten, so the feature set is a bit different. All code has been converted to TypeScript.

The most important changes:

  • All pane sizes are relative, so when the window is resized, all panes grow/shrink at the same time (as far as their minSize properties allow)
  • An array of all pane sizes is passed to the onDragFinished and onChange callbacks

Props

split: 'vertical' | 'horizontal'

Split direction, defaults to vertical.

defaultSizes: number[]

Array of (relative) default sizes for the individual panes. Missing values default to 1. When no defaultSizes are passed, all sizes default to 1, equally distributing the available space (as far as minSize values permit).

minSize: number | number[]

Minimum size of all panes (in pixels), or array containing individual minimum sizes for each pane. Defaults to 50.

className: string

Additional CSS class name that is appied to all elements rendered by the SplitPane. For a class name custom, the individual elements can be selected as .SplitPane.custom, .Resizer.custom, and .Pane.custom.

onDragStarted: () => void

This callback is invoked when a drag starts.

onDragFinished: (sizes: number[]) => void

This callback is invoked when a drag ends.

onChange: (sizes: number[]) => void

This callback is invoked with the current drag during a drag event. It is recommended that it is wrapped in a debounce function.

Persisting Positions

Each SplitPane accepts an onChange function prop. Used in conjunction with defaultSize and a persistence layer, you can ensure that your splitter choices survive a refresh of your app.

For example, if you are comfortable with the trade-offs of localStorage, you could do something like the following:

<SplitPane
    split="vertical" minSize={50}
    defaultSizes={JSON.parse(localStorage.getItem('splitPos')) || undefined}
    onDragFinished={(size) => localStorage.setItem('splitPos', JSON.stringify(size))}
>
    <div></div>
    <div></div>
</SplitPane>

Example styling

This gives a single pixel wide divider, but with a 'grabbable' surface of 11 pixels.

Thanks to background-clip: padding-box; for making transparent borders possible.

.Resizer {
    background: #000;
    opacity: .2;
    z-index: 1;
    box-sizing: border-box;
    background-clip: padding-box;
}

.Resizer:hover {
    transition: all 2s ease;
}

.Resizer.horizontal {
    height: 11px;
    margin: -5px 0;
    border-top: 5px solid rgba(255, 255, 255, 0);
    border-bottom: 5px solid rgba(255, 255, 255, 0);
    cursor: row-resize;
}

.Resizer.horizontal:hover, .Resizer.horizontal.resizing {
    border-top: 5px solid rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
    width: 11px;
    margin: 0 -5px;
    border-left: 5px solid rgba(255, 255, 255, 0);
    border-right: 5px solid rgba(255, 255, 255, 0);
    cursor: col-resize;
}

.Resizer.vertical:hover, .Resizer.vertical.resizing {
    border-left: 5px solid rgba(0, 0, 0, 0.5);
    border-right: 5px solid rgba(0, 0, 0, 0.5);
}

.DragLayer {
	z-index: 1;
	pointer-events: none;
}

.DragLayer.resizing {
	pointer-events: auto;
}

.DragLayer.horizontal {
	cursor: row-resize;
}

.DragLayer.vertical {
	cursor: col-resize;
}

Keywords

FAQs

Last updated on 01 Feb 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