
Product
Introducing Module Reachability: Focus on the Vulnerabilities That Matter
Module Reachability filters out unreachable CVEs so you can focus on vulnerabilities that actually matter to your application.
@andrewray/react-multi-split-pane
Advanced tools
Fork of react-split-pane with support for more than two panes.
npm install react-multi-split-pane
# or if you use yarn
yarn add react-multi-split-pane
<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>
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:
minSize
properties allow)onDragFinished
and onChange
callbacksSplit direction, defaults to vertical.
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).
Minimum size of all panes (in pixels), or array containing individual minimum sizes for each pane. Defaults to 50.
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
.
Additional CSS class name that is appied only to the resizer rendered by the SplitPane.
This callback is invoked when a drag starts.
This callback is invoked when a drag ends.
This callback is invoked with the current drag during a drag event. It is recommended that it is wrapped in a debounce function.
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>
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;
}
FAQs
React multi split-pane component
The npm package @andrewray/react-multi-split-pane receives a total of 18 weekly downloads. As such, @andrewray/react-multi-split-pane popularity was classified as not popular.
We found that @andrewray/react-multi-split-pane demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Product
Module Reachability filters out unreachable CVEs so you can focus on vulnerabilities that actually matter to your application.
Company News
Socket is bringing best-in-class reachability analysis into the platform — cutting false positives, accelerating triage, and cementing our place as the leader in software supply chain security.
Product
Socket is introducing a new way to organize repositories and apply repository-specific security policies.