@split-ui/react

A React component library for creating resizable panel layouts. Like react-resizable-panels, but with more freedom in defining sizes, and SSR capable.

Installation#

npm install @split-ui/react

Basic Usage#

Import the Panel component

import { Panel, Resizer } from '@split-ui/react';

function App() {
  return (
    <Panel group style={{ height: '100vh' }}>
      <Panel initialSize="200px">Sidebar</Panel>
      <Resizer />
      <Panel>Main Content</Panel>
    </Panel>
  );
}

How is this different from react-resizable-panels?#

Not much, I absolutely love react-resizable-panels, but I want more control over sizing. I also want to have perfect persistence in statically exported pages. With no compromise on bundle size or performance.

@split-ui/react also doesn't accept numbers as sizes. But I might add this in the future.

Feature	@split-ui/react	react-resizable-panels
Percentage-based Sizes	✅	✅
Fixed Sizes	✅ Any CSS length	❌
CSS-defined Sizes	✅ Through CSS variables	❌
Persistence	✅	✅
SSR Support	✅ Built-in for local storage	❌ Requires server runtime
Nested Layouts	✅	✅
Mouse	✅	✅
Keyboard	✅	✅
Touch	✅	✅
Accessible	✅	✅
Conditional Rendering	✅	✅
Theming	✅ Built-in resizer themes	❌
Imperative API	🕒 Planned	✅
Collapsible Panels	❓ Maybe	✅
Bundle Size

Also improves on some minor issues such as:

• Allows resizing over iframe element as a child of a resizable panel.
• Aria attributes in pixel values, relative to the panel group.
• Blurs focused resizer when another one is dragged.
• Minimizes the amount of DOM elements created.
• Allows switching text direction of the page.