What is react-split-pane?
The react-split-pane package allows you to create resizable split views or panes in your React applications. It is useful for creating layouts where you need to divide the screen into multiple resizable sections.
What are react-split-pane's main functionalities?
Basic Split Pane
This code demonstrates a basic vertical split pane with two sections. The user can resize the panes between a minimum size of 50px and a maximum size of 200px.
import SplitPane from 'react-split-pane';
function App() {
return (
<SplitPane split="vertical" minSize={50} defaultSize={100} maxSize={200}>
<div>Pane 1</div>
<div>Pane 2</div>
</SplitPane>
);
}
Nested Split Panes
This code demonstrates nested split panes. The outer split pane is vertical, and the inner split pane is horizontal, allowing for more complex layouts.
import SplitPane from 'react-split-pane';
function App() {
return (
<SplitPane split="vertical" minSize={50} defaultSize={100} maxSize={200}>
<div>Pane 1</div>
<SplitPane split="horizontal" minSize={50} defaultSize={100} maxSize={200}>
<div>Pane 2</div>
<div>Pane 3</div>
</SplitPane>
</SplitPane>
);
}
Controlled Split Pane
This code demonstrates a controlled split pane where the size of the panes is managed by the component's state. The size can be dynamically updated based on user interaction.
import React, { useState } from 'react';
import SplitPane from 'react-split-pane';
function App() {
const [size, setSize] = useState(100);
return (
<SplitPane split="vertical" size={size} onChange={setSize}>
<div>Pane 1</div>
<div>Pane 2</div>
</SplitPane>
);
}
Other packages similar to react-split-pane
react-resizable
The react-resizable package provides a set of React components for creating resizable elements. It is more focused on individual resizable components rather than split panes, making it more flexible for custom resizable layouts.
react-grid-layout
The react-grid-layout package offers a grid-based layout system with draggable and resizable widgets. It is more feature-rich compared to react-split-pane, providing a more comprehensive solution for complex grid layouts.
react-split
The react-split package is a lightweight alternative for creating split views in React applications. It offers similar functionality to react-split-pane but with a smaller footprint and fewer dependencies.
React Split Pane
Split-Pane component built with React, can be split vertically or horizontally.
Check out the demo
<SplitPane split="vertical" minSize={50} defaultSize={100}>
<div></div>
<div></div>
</SplitPane>
<SplitPane split="vertical" minSize={50}>
<div></div>
<SplitPane split="horizontal">
<div></div>
<div></div>
</SplitPane>
</SplitPane>
Primary pane
By dragging 'draggable' surface you can change size of the first pane.
The first pane keeps then its size while the second pane is resized by browser window.
By default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane.
If you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions,
set SplitPane prop primary
to second
. In case of 'horizontal' SplitPane the height of bottom pane remains the same.
Resizing can be disabled by passing the enableResizing
prop as false
. Resizing is enabled by default.
You can also set the size of the pane using the size
prop. Note that a size set through props ignores the defaultSize
and minSize
properties.
In this example right pane keeps its width 200px while user is resizing browser window.
<SplitPane split="vertical" defaultSize={200} primary="second">
<div></div>
<div></div>
</SplitPane>
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}
defaultSize={ localStorage.getItem('splitPos') }
onChange={ size => localStorage.setItem('splitPos', size) }>
<div></div>
<div></div>
</SplitPane>
Disclaimer: localStorage has a variety of performance trade-offs. Browsers such
as Firefox have now optimized localStorage use so that they will asynchronously
initiate a read of all saved localStorage data for an origin once they know the
page will load. If the data has not fully loaded by the time code accesses
localStorage, the code will cause the page's main thread to block until the
database load completes. When the main thread is blocked, no other JS code will
run or layout will occur. In multiprocess browsers and for users with fast
disk storage, this will be less of a problem. You are likely to get yelled at
if you use localStorage.
A potentially better idea is to use something like
https://github.com/mozilla/localForage although hooking it up will be slightly
more involved. You are likely to be admired by all for judiciously avoiding
use of localStorage.
Resizing callbacks
If you need more control over resizing, SplitPane can notify you about when resizing started
and when it ended through two callbacks: onDragStarted
and onDragFinished
.
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;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.Resizer:hover {
-webkit-transition: all 2s ease;
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;
width: 100%;
}
.Resizer.horizontal:hover {
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;
height: 100%;
}
.Resizer.vertical:hover {
border-left: 5px solid rgba(0, 0, 0, 0.5);
border-right: 5px solid rgba(0, 0, 0, 0.5);
}
Resizer.disabled {
cursor: not-allowed;
}
Resizer.disabled:hover {
border-color: transparent;
}