Split office workspace illustrating React Split Pane concept

Divide and Conquer: Mastering Layouts with React Split Pane

The Gray Cat
The Gray Cat

React Split Pane is a versatile and powerful component that enables developers to create resizable split views in their React applications. This library offers an intuitive way to divide the screen into multiple panes, either vertically or horizontally, with the ability to nest split panes for complex layouts. Whether you’re building a code editor, a file manager, or any application that requires adjustable layouts, React Split Pane provides a robust solution.

Key Features of React Split Pane

  • Flexible Orientation: Create both vertical and horizontal splits
  • Nested Splits: Combine multiple split panes for complex layouts
  • Customizable Resizer: Style the divider between panes to match your design
  • Controlled Resizing: Set minimum and maximum sizes for panes
  • Responsive Design: Adapt to different screen sizes and orientations
  • Event Callbacks: React to drag events for additional control

Getting Started with React Split Pane

Installation

To add React Split Pane to your project, use npm or yarn:

npm install react-split-pane
# or
yarn add react-split-pane

Basic Usage

Let’s start with a simple example of how to use React Split Pane in your React application:

import React from 'react';
import SplitPane from 'react-split-pane';

const App: React.FC = () => {
  return (
    <SplitPane split="vertical" minSize={50} defaultSize={100}>
      <div>Left Content</div>
      <div>Right Content</div>
    </SplitPane>
  );
};

export default App;

In this example, we create a vertical split with two panes. The left pane has a minimum size of 50 pixels and a default size of 100 pixels. The content of each pane is wrapped in a div, but you can use any React component as a child of SplitPane.

Advanced Usage and Customization

Nested Split Panes

React Split Pane allows you to create complex layouts by nesting split panes:

import React from 'react';
import SplitPane from 'react-split-pane';

const ComplexLayout: React.FC = () => {
  return (
    <SplitPane split="vertical" minSize={200} defaultSize={300}>
      <div>Left Pane</div>
      <SplitPane split="horizontal">
        <div>Top Right Pane</div>
        <div>Bottom Right Pane</div>
      </SplitPane>
    </SplitPane>
  );
};

export default ComplexLayout;

This example creates a layout with three panes: a vertical split on the left, and the right side further divided horizontally.

Customizing the Resizer

You can style the resizer (the draggable divider between panes) to match your application’s design:

import React from 'react';
import SplitPane from 'react-split-pane';

const CustomResizerExample: React.FC = () => {
  const resizerStyle = {
    background: '#000',
    opacity: 0.2,
    width: '10px',
    cursor: 'col-resize',
    margin: '0 -5px',
    borderLeft: '5px solid rgba(255, 255, 255, 0)',
    borderRight: '5px solid rgba(255, 255, 255, 0)',
  };

  return (
    <SplitPane
      split="vertical"
      minSize={50}
      defaultSize={100}
      resizerStyle={resizerStyle}
    >
      <div>Left Content</div>
      <div>Right Content</div>
    </SplitPane>
  );
};

export default CustomResizerExample;

This example creates a custom resizer with a specific width, color, and hover effect.

Controlling Pane Sizes

React Split Pane offers various props to control pane sizes:

import React from 'react';
import SplitPane from 'react-split-pane';

const ControlledSizesExample: React.FC = () => {
  return (
    <SplitPane
      split="vertical"
      minSize={100}
      maxSize={500}
      defaultSize={200}
      primary="second"
    >
      <div>First Pane (Flexible)</div>
      <div>Second Pane (Fixed Size)</div>
    </SplitPane>
  );
};

export default ControlledSizesExample;

In this example, we set a minimum size of 100 pixels, a maximum size of 500 pixels, and a default size of 200 pixels for the second pane. The primary="second" prop makes the second pane the one that maintains its size when the window is resized.

Handling Resize Events

React Split Pane provides callbacks for various drag events:

import React from 'react';
import SplitPane from 'react-split-pane';

const ResizeEventsExample: React.FC = () => {
  const handleDragStarted = () => {
    console.log('Drag started');
  };

  const handleDragFinished = (newSize: number) => {
    console.log(`Drag finished. New size: ${newSize}px`);
  };

  return (
    <SplitPane
      split="vertical"
      minSize={50}
      defaultSize={100}
      onDragStarted={handleDragStarted}
      onDragFinished={handleDragFinished}
    >
      <div>Left Content</div>
      <div>Right Content</div>
    </SplitPane>
  );
};

export default ResizeEventsExample;

These callbacks allow you to perform actions when the user starts dragging the resizer and when they finish.

Persisting Pane Sizes

To maintain pane sizes across page reloads, you can use the onChange prop in combination with local storage:

import React, { useState, useEffect } from 'react';
import SplitPane from 'react-split-pane';

const PersistentSplitPane: React.FC = () => {
  const [size, setSize] = useState<number | string>(
    localStorage.getItem('splitPaneSize') || '50%'
  );

  const onChange = (newSize: number) => {
    setSize(newSize);
    localStorage.setItem('splitPaneSize', newSize.toString());
  };

  return (
    <SplitPane split="vertical" size={size} onChange={onChange}>
      <div>Left Content</div>
      <div>Right Content</div>
    </SplitPane>
  );
};

export default PersistentSplitPane;

This example stores the pane size in local storage and retrieves it on component mount, ensuring that the user’s preferred layout is preserved.

Conclusion

React Split Pane is a versatile library that empowers developers to create flexible and interactive layouts with ease. Its simple API, combined with powerful customization options, makes it an excellent choice for building complex user interfaces in React applications. By leveraging features like nested panes, customizable resizers, and size controls, you can create intuitive and responsive split-view layouts that enhance user experience and productivity.

As you integrate React Split Pane into your projects, remember to consider performance implications, especially when using local storage for persistence. For more advanced use cases, explore the library’s documentation and community resources to unlock its full potential in your React applications.

Comments