Registry / web-framework / react-split-pane

react-split-pane

library3.2.0jsnpmunverified

react-split-pane is a modern, accessible, and TypeScript-first React component designed for creating resizable split layouts. The current stable version is v3.2.0, which is built entirely with React hooks and provides comprehensive type definitions. This library enables developers to create flexible layouts with multiple resizable panes, supporting both horizontal and vertical splits, as well as nested configurations. Key differentiators include full TypeScript support, robust accessibility features (keyboard navigation, ARIA), touch-friendly interactions for mobile devices, and easy theming via CSS variables. It boasts a small bundle size (< 5KB gzipped) and ensures performant resizing through requestAnimationFrame throttling. Releases are active, with several patches and minor versions pushed out for the v3 series, indicating ongoing development and maintenance.

web-framework

npm install react-split-pane

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SPLIT-PANE

react-split-pane

web-frameworkjavascriptv3.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SplitPane

✓ import { SplitPane } from 'react-split-pane';

✗ const SplitPane = require('react-split-pane');

Since v3, the library is hooks-based and primarily designed for ES Modules. CommonJS `require` is not recommended.

Pane

✓ import { Pane } from 'react-split-pane';

✗ import Pane from 'react-split-pane/Pane';

Pane is a named export and used as a child component within SplitPane. Do not attempt to import from a direct file path.

usePersistence

✓ import { usePersistence } from 'react-split-pane/persistence';

✗ import { usePersistence } from 'react-split-pane';

The `usePersistence` hook is located in a sub-path for better tree-shaking and organization.

Demonstrates a basic horizontal split-pane layout with two functional components for a sidebar and main content, setting initial and minimum sizes.

import React from 'react'; import { SplitPane, Pane } from 'react-split-pane'; interface SidebarProps {} const Sidebar: React.FC<SidebarProps> = () => ( <div style={{ padding: '20px', background: '#f0f0f0', height: '100%' }}>Sidebar Content</div> ); interface MainContentProps {} const MainContent: React.FC<MainContentProps> = () => ( <div style={{ padding: '20px', background: '#e0e0e0', height: '100%' }}>Main Application Content</div> ); function App() { return ( <div style={{ width: '100%', height: '100vh', display: 'flex' }}> <SplitPane direction="horizontal"> <Pane minSize="200px" defaultSize="300px"> <Sidebar /> </Pane> <Pane> <MainContent /> </Pane> </SplitPane> </div> ); } export default App;

Debug

Known issues

breakingVersion 3.0.0 introduced a complete rewrite of the library, moving to a hooks-based architecture, full TypeScript, and new API patterns. Code written for v2.x or earlier will not be compatible.

fix

Review the v3 documentation and examples for `SplitPane` and `Pane` components. Refactor existing split-pane implementations to conform to the new API, especially around event handlers and prop structures.

affects: >=3.0.0

gotchaThe `SplitPane` component uses `width: 100%` and `height: 100%` by default. Its parent container must have explicit dimensions defined (e.g., `height: 100vh` for vertical splits or a fixed pixel height) for the component to render correctly.

fix

Ensure the parent element wrapping `SplitPane` has clearly defined `width` and `height` CSS properties. For full-viewport layouts, `height: 100vh` on the parent is a common solution.

affects: >=3.0.0

behavior-changePrior to v3.0.5, controlled panes with fixed pixel sizes would incorrectly scale proportionally when the browser window or container resized. This behavior was fixed to maintain fixed pixel sizes as expected.

fix

Upgrade to `react-split-pane@3.0.5` or later. If your application relied on the previous proportional scaling behavior for controlled pixel-sized panes, you will need to adjust your layout logic.

affects: >=3.0.0 <3.0.5

api-changeVersion 3.1.0 replaced separate mouse and touch event handlers with the unified Pointer Events API for improved drag UX. The `onResize` and `onResizeStart` callbacks now include `event.pointerType`.

fix

When handling resize events, consider using `event.pointerType` ('mouse', 'touch', or 'pen') to differentiate input types within your callback logic. This may simplify existing conditional logic that previously checked for `MouseEvent` vs `TouchEvent`.

affects: >=3.1.0

Errors

Common errors & fixes

SplitPane does not render or appears collapsed.

The parent container of SplitPane lacks explicit width and height dimensions.

fix

Ensure the parent element of SplitPane has defined CSS properties for `width` and `height`, for example, `<div style={{ width: '100%', height: '100vh' }}><SplitPane>...</SplitPane></div>`.

Pane sizes reset to default when the component unmounts or the page refreshes.

The application is not persisting the pane sizes between renders or sessions.

fix

Implement the `usePersistence` hook from `react-split-pane/persistence` to save and restore pane sizes to `localStorage` or `sessionStorage`.

Error: Cannot assign to read only property 'exports' of object '#<Object>'

Attempting to import `react-split-pane` using CommonJS `require()` syntax in an environment expecting ES Modules.

fix

Migrate your import statements from `const { SplitPane } = require('react-split-pane');` to `import { SplitPane } from 'react-split-pane';`.

Upgrade

Version history

3.2.0latest on npm

Audit

Dependencies

reactrequiredCore React library required for component rendering.

react-domrequiredRequired for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/tomkp/react-split-pane ↗

packagehttps://www.npmjs.com/package/react-split-pane ↗