react-split-pane

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.

README

react-split-pane

Split-Pane component built with React, can be split vertically or horizontally.

Check out the demo

   <SplitPane orientation="horizontal" minSize="50">
       <div></div>
       <div></div>
   </SplitPane>

    <SplitPane orientation="horizontal" minSize="50">
        <div></div>
        <SplitPane orientation="vertical">
            <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.vertical {
        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.vertical:hover {
        border-top: 5px solid rgba(0, 0, 0, 0.5);
        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
    }

    .Resizer.horizontal {
        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.horizontal:hover {
        border-left: 5px solid rgba(0, 0, 0, 0.5);
        border-right: 5px solid rgba(0, 0, 0, 0.5);
    }

UMD-style build

A standalone browserify build can be produced by running:

npm run-script dist

This will produce a UMD-compatible module that assumes that your module system can satisfy calls to require('react') and require('react-vendor-prefix').

---