Star on GitHub

ResizableSplitPane

An N-pane split view with draggable handles and a single render prop for custom handle UI. Supports min/max constraints, persisted sizes, and both horizontal and vertical layouts.

InstallDemoAPIExamples
Installation
npm install react-driftkit
Interactive Demo
Panes
Orientation
Draggable
on
Sizes
25% / 50% / 25%
Pane 0Drag handles to resize. Double-click to reset.
0
Pane 1Pane 1 content
1
Pane 2Pane 2 content
API Reference
Prop Type Default
children
Two or more child elements to render in the split panes.
 ReactNode[] —
orientation
Split direction. 'horizontal' puts panes side-by-side; 'vertical' stacks them.
 'horizontal' | 'vertical' 'horizontal'
defaultSizes
Uncontrolled initial sizes as ratios summing to 1 (e.g. [0.25, 0.5, 0.25]).
 number[] equal split
sizes
Controlled sizes. When set, parent drives all pane sizes.
 number[] —
onSizesChange
Fires after a drag release with the committed sizes array.
 (sizes: number[]) => void —
onDrag
Fires continuously while dragging with the live sizes array.
 (sizes: number[]) => void —
minSize
Minimum size in pixels for any pane.
 number 50
maxSize
Maximum size in pixels for any pane. No limit when omitted.
 number —
handleSize
Thickness of each drag handle in pixels.
 number 8
handle
Render prop called once per boundary. Receives { index, isDragging, orientation }. Default empty div when omitted.
 (info: HandleInfo) => ReactNode —
persistKey
localStorage key to persist sizes across sessions. Omit to disable.
 string —
draggable
Whether the user can drag the handles.
 boolean true
doubleClickReset
Double-click a handle to reset to defaultSizes (or equal split).
 boolean true
style
Additional inline styles for the container.
 CSSProperties {}
className
Additional CSS class for the container.
 string ''

The container exposes data-orientation and data-dragging attributes. Panes expose data-pane={index}. Handles expose data-handle={index} and data-dragging when active.

Code Examples
tsx
import { ResizableSplitPane } from 'react-driftkit';

function App() {
  return (
    <ResizableSplitPane style={{ height: 400 }}>
      <div>Left pane</div>
      <div>Right pane</div>
    </ResizableSplitPane>
  );
}
Types
typescript 
type SplitOrientation = 'horizontal' | 'vertical';

interface HandleInfo {
  index: number;
  isDragging: boolean;
  orientation: SplitOrientation;
}

interface ResizableSplitPaneProps {
  children: ReactNode[];
  orientation?: SplitOrientation;
  defaultSizes?: number[];
  sizes?: number[];
  onSizesChange?: (sizes: number[]) => void;
  onDrag?: (sizes: number[]) => void;
  minSize?: number;
  maxSize?: number;
  handleSize?: number;
  handle?: (info: HandleInfo) => ReactNode;
  persistKey?: string;
  draggable?: boolean;
  doubleClickReset?: boolean;
  style?: CSSProperties;
  className?: string;
}

Enjoying react-driftkit?

Star the repo on GitHub to help more devs discover it.

Star on GitHub