{"id":11866,"library":"react-split","title":"React Split","description":"react-split is a React component that enables the creation of resizable split views in web applications. It functions as a lightweight, declarative wrapper around the core Split.js library. Developers define child components within a `<Split>` container, which are then rendered as resizable panes. The current stable version is 2.0.14, with an active release cadence focused on bug fixes and minor feature enhancements. Its primary strengths include ease of use, minimal overhead, and direct exposure of Split.js options via React props, allowing for straightforward integration of flexible, resizable layouts. The package also ships with full TypeScript type definitions.","status":"active","version":"2.0.14","language":"javascript","source_language":"en","source_url":"https://github.com/nathancahill/split","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-split","lang":"bash","label":"npm"},{"cmd":"yarn add react-split","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-split","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false}],"imports":[{"note":"The `Split` component is provided as a default export.","wrong":"import { Split } from 'react-split'","symbol":"Split","correct":"import Split from 'react-split'"},{"note":"Import types using `import type` for better tree-shaking and clarity in TypeScript projects.","wrong":"import { SplitProps } from 'react-split'","symbol":"SplitProps","correct":"import type { SplitProps } from 'react-split'"},{"note":"For CommonJS environments, `require` will return the default export directly.","wrong":"const { Split } = require('react-split')","symbol":"Split (CommonJS)","correct":"const Split = require('react-split')"}],"quickstart":{"code":"import React from 'react';\nimport Split from 'react-split';\n\n// Dummy components for demonstration purposes\nconst PaneA = () => (\n  <div style={{ background: '#f0f0f0', padding: '20px', height: '100%', overflow: 'auto' }}>\n    <h2>Pane A</h2>\n    <p>This is the content for the first resizable pane. It starts at 25% of the container width.</p>\n    <p>You can adjust its size by dragging the splitter.</p>\n  </div>\n);\n\nconst PaneB = () => (\n  <div style={{ background: '#e0e0f0', padding: '20px', height: '100%', overflow: 'auto' }}>\n    <h2>Pane B</h2>\n    <p>This is the content for the second resizable pane. It starts at 75% of the container width.</p>\n    <p>The `minSize` prop ensures panes don't shrink below a specified pixel value.</p>\n  </div>\n);\n\nfunction App() {\n  return (\n    <div style={{ height: '500px', width: '80%', margin: '50px auto', display: 'flex', border: '1px solid #ddd', borderRadius: '4px', overflow: 'hidden' }}>\n      <Split\n        sizes={[25, 75]}\n        minSize={100}\n        expandToMin={false}\n        gutterSize={10}\n        gutterAlign=\"center\"\n        snapOffset={30}\n        dragInterval={1}\n        direction=\"horizontal\"\n        cursor=\"col-resize\"\n        className=\"split-container\"\n        elementStyle={(dimension, elementSize, gutterSize, index) => ({\n          flexBasis: `calc(${elementSize}% - ${gutterSize}px)`\n        })}\n        gutterStyle={(dimension, gutterSize, index) => ({\n          flexBasis: `${gutterSize}px`\n        })}\n        onDragStart={() => console.log('Drag started')}\n        onDragEnd={(sizes) => console.log('Drag ended with sizes:', sizes)}\n      >\n        <PaneA />\n        <PaneB />\n      </Split>\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates how to set up a basic horizontal split view using `react-split` with two child components. It includes various configuration options like initial `sizes`, `minSize`, `gutterSize`, and event handlers for drag start/end, along with basic styling for visual clarity."},"warnings":[{"fix":"Ensure your React version is compatible. If encountering unexpected behavior, verify that children passed to `<Split>` are standard React elements or fragments.","message":"Version 2.0.0 introduced internal changes related to `React.Children.toArray`, which, while intended to fix underlying issues, might subtly alter behavior in complex scenarios involving children manipulation. No direct API changes were announced, but custom rendering logic around children may need review.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to `react-split@>=1.5.7` to benefit from fixes. Always ensure `minSize` is set to a reasonable pixel value and `sizes` array values respect this minimum.","message":"Passing very small `sizes` values (e.g., 0) or values that calculate to less than the `gutterSize` can cause layout issues or panels to disappear, especially if `minSize` is not adequately configured.","severity":"gotcha","affected_versions":"<1.5.7"},{"fix":"Update to `react-split@>=1.5.9`. If the issue persists, consider conditionally mounting the `<Split>` component only when it is visible, or manually triggering a resize when its container becomes visible.","message":"Split views that are initially rendered in a hidden state (e.g., via `display: none` CSS) may fail to correctly initialize their dimensions and appear broken or unresizable when later revealed.","severity":"gotcha","affected_versions":"<1.5.9"},{"fix":"Upgrade to `react-split@>=1.5.6` to ensure consistent and correct cursor behavior as expected.","message":"Prior to version 1.5.6, minor discrepancies existed in the documentation and actual behavior of cursor settings (`col-resize`, `row-resize`).","severity":"gotcha","affected_versions":"<1.5.6"},{"fix":"If supporting mobile, ensure you upgrade to `react-split@>=1.5.5` to resolve the mobile dragging issues introduced in the previous patch.","message":"Version 1.5.4 introduced a bug that specifically affected dragging functionality on mobile devices.","severity":"gotcha","affected_versions":"1.5.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Set a robust `minSize` prop (e.g., `minSize={50}`) and ensure initial `sizes` are valid. Upgrade to `react-split@>=1.5.7` to benefit from fixes related to low `sizes` values.","cause":"The `sizes` prop or subsequent drag operations result in panel sizes smaller than the `minSize` or the implicit size required by the gutters, leading to an invalid layout state.","error":"Layout breaks or panels disappear when resizing to very small values"},{"fix":"Update to `react-split@>=1.5.9`. Alternatively, ensure the component is visible upon mounting, or trigger a re-render/resize operation when the container becomes visible.","cause":"The `<Split>` component was mounted while its container (or itself) had `display: none`, preventing it from accurately calculating initial dimensions.","error":"Split panes do not appear or are misaligned when component is initially hidden"},{"fix":"Correct the import statement to use the default import: `import Split from 'react-split'`.","cause":"This error occurs when attempting to use a named import for `Split` (e.g., `import { Split } from 'react-split'`) while the library provides it as a default export.","error":"TypeError: Cannot destructure property 'Split' of 'react_split__WEBPACK_IMPORTED_MODULE_X___default.a' as it is undefined."},{"fix":"Use `import type { SplitProps } from 'react-split'` for importing the type definition.","cause":"Incorrect import syntax for TypeScript types, often trying to import a type as a value or without the `type` keyword.","error":"TypeScript error: Module '\"react-split\"' has no exported member 'SplitProps'."}],"ecosystem":"npm"}