{"id":11867,"library":"react-split-pane","title":"React Split Pane","description":"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.","status":"active","version":"3.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/tomkp/react-split-pane","tags":["javascript","react","react-component","split-pane","react-split-pane","typescript","hooks","resizable","panes"],"install":[{"cmd":"npm install react-split-pane","lang":"bash","label":"npm"},{"cmd":"yarn add react-split-pane","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-split-pane","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library required for component rendering.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Since v3, the library is hooks-based and primarily designed for ES Modules. CommonJS `require` is not recommended.","wrong":"const SplitPane = require('react-split-pane');","symbol":"SplitPane","correct":"import { SplitPane } from 'react-split-pane';"},{"note":"Pane is a named export and used as a child component within SplitPane. Do not attempt to import from a direct file path.","wrong":"import Pane from 'react-split-pane/Pane';","symbol":"Pane","correct":"import { Pane } from 'react-split-pane';"},{"note":"The `usePersistence` hook is located in a sub-path for better tree-shaking and organization.","wrong":"import { usePersistence } from 'react-split-pane';","symbol":"usePersistence","correct":"import { usePersistence } from 'react-split-pane/persistence';"}],"quickstart":{"code":"import React from 'react';\nimport { SplitPane, Pane } from 'react-split-pane';\n\ninterface SidebarProps {}\nconst Sidebar: React.FC = () => (\n
Sidebar Content
\n);\n\ninterface MainContentProps {}\nconst MainContent: React.FC = () => (\n
Main Application Content
\n);\n\nfunction App() {\n return (\n
\n \n \n \n \n \n \n \n \n
\n );\n}\n\nexport default App;","lang":"typescript","description":"Demonstrates a basic horizontal split-pane layout with two functional components for a sidebar and main content, setting initial and minimum sizes."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=3.0.0"},{"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.","message":"Prior 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.","severity":"behavior-change","affected_versions":">=3.0.0 <3.0.5"},{"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`.","message":"Version 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`.","severity":"api-change","affected_versions":">=3.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the parent element of SplitPane has defined CSS properties for `width` and `height`, for example, `
...
`.","cause":"The parent container of SplitPane lacks explicit width and height dimensions.","error":"SplitPane does not render or appears collapsed."},{"fix":"Implement the `usePersistence` hook from `react-split-pane/persistence` to save and restore pane sizes to `localStorage` or `sessionStorage`.","cause":"The application is not persisting the pane sizes between renders or sessions.","error":"Pane sizes reset to default when the component unmounts or the page refreshes."},{"fix":"Migrate your import statements from `const { SplitPane } = require('react-split-pane');` to `import { SplitPane } from 'react-split-pane';`.","cause":"Attempting to import `react-split-pane` using CommonJS `require()` syntax in an environment expecting ES Modules.","error":"Error: Cannot assign to read only property 'exports' of object '#'"}],"ecosystem":"npm"}