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">
<div></div>
<div></div>
</SplitPane>
<SplitPane split="vertical" minSize="50">
<div></div>
<SplitPane split="horizontal">
<div></div>
<div></div>
</SplitPane>
</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;
-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);
}