v3.2.0

What's New

pointerType in ResizeEvent (#880)

You can now access event.pointerType in resize callbacks to differentiate between mouse, touch, and pen input:

<SplitPane
  onResizeStart={(event) => {
    console.log(event.pointerType); // 'mouse', 'touch', or 'pen'
  }}
  onResize={(sizes, event) => {
    if (event.pointerType === 'touch') {
      // Handle touch-specific logic
    }
  }}
>

Thanks to @delijah for the suggestion!

Full Changelog

• feat: expose pointerType in ResizeEvent (#880)

v3.1.0

What's New

Pointer Events API (#878)

Replaced separate mouse and touch event handlers with the unified Pointer Events API for better drag UX.

Benefits:

• 🎯 Better cursor control - Pointer capture prevents cursor blinking during drag
• 🔧 Simpler code - Single event handler instead of separate mouse/touch logic
• 📱 Unified input - Handles mouse, touch, and pen input consistently
• ✨ Multi-touch safe - Ignores events from non-captured pointers

Backwards Compatibility

Custom dividers using the old props (onMouseDown, onTouchStart, onTouchEnd) will continue to work. These props are now deprecated and delegate to onPointerDown internally.

Migration (optional):

- onMouseDown={handler}
- onTouchStart={handler}
- onTouchEnd={handler}
+ onPointerDown={handler}

Changes

• feat: replace mouse/touch events with pointer events (#879)
• feat: add backwards compatible deprecated handlers

v3.0.5

Bug Fixes

• fix: maintain controlled pane sizes on container resize (#869)

  When using controlled mode with pixel sizes (e.g., <Pane size={200}>), panes were incorrectly being scaled proportionally when the browser window or container resized. This fix ensures controlled panes maintain their fixed pixel sizes.

  Before: Controlled panes scaled proportionally on window resize
  After: Controlled panes maintain fixed pixel sizes as expected

  Fixes #868

Behavior Summary

Mode	On Window Resize
Controlled (size={200})	Maintains fixed pixel size
Uncontrolled (defaultSize={200})	Scales proportionally

Installation

npm install react-split-pane@3.0.5

v3.0.4

Add checks script

Added npm run checks script that runs all validations in one command:

• TypeScript type checking
• ESLint
• Prettier formatting
• Vitest tests

v3.0.3

Simplified Examples

• Clean white background replacing dark theme
• Minimal 1px divider with semi-opaque hover/drag indicator
• Added dragging class to divider to prevent hover flicker
• Removed TouchExample (touch support is automatic)
• Added PercentageExample for percentage-based layouts
• Enhanced StyledExample with gradient panes and grip-dot divider
• Expanded snap points in SnapPointsExample (150, 300, 450, 600, 800)
• Improved responsive nav buttons for smaller screens

v3.0.2

Documentation

• Add npm monthly downloads badge to README (#852)

Full Changelog: v3.0.1...v3.0.2

v3.0.1

Documentation

• Add Tailwind CSS and shadcn/ui integration guide to README (#851)
  • Using Tailwind classes directly with className props
  • shadcn/ui integration examples
  • Custom divider component with shadcn theming
  • CSS variables configuration for Tailwind themes

Full Changelog: v3.0.0...v3.0.1

v3.0.0

What's New in v3.0.0

Complete rewrite of react-split-pane with modern React patterns:

• Hooks-based architecture - Built entirely with React hooks
• Full TypeScript support - Complete type definitions included
• React 17, 18, and 19 support - Works with latest React versions
• Accessibility improvements - Keyboard navigation and ARIA support
• Touch support - Works on mobile devices
• CSS variables - Easy theming with CSS custom properties
• Smaller bundle size - Tree-shakeable ESM and CJS builds
• New exports - Separate keyboard and persistence utilities

Breaking Changes

• Complete API rewrite - see README for migration guide
• Minimum Node.js 20 required

v0.1.92

chore(release): 0.1.92

v0.1.87

Patches

• Put React and ReactDOM as peer dependencies #341