v3.3.0

What's New

snapToPoint prop (#887)

Replace the built-in snapping with your own function. It receives the size of the pane before the dragged divider, the snap points and the tolerance, and returns the size to use:

<SplitPane
  snapPoints={[0, 200]}
  snapTolerance={20}
  snapToPoint={(value, points, tolerance) => {
    // only snap between the first and last point
    if (value <= Math.min(...points) || value >= Math.max(...points)) return value;
    for (const p of points) {
      if (Math.abs(value - p) <= tolerance) return p;
    }
    return value;
  }}
>

Thanks to @phryneas!

Fixes

• Snapping keeps the total size (#888): only the pane before the dragged divider snaps, and the pane after it absorbs the difference. Previously every pane snapped independently, so the layout could drift. Thanks @phryneas!
• No flicker with controlled sizes (#889): when a controlled pane size and its content change together, the new size is now applied in the same frame. Thanks @akx!
• Custom dividers using the deprecated onMouseDown / onTouchStart props work again (#890): in 3.1.0 and 3.2.0 they threw e.preventDefault is not a function, so they couldn't be dragged. Thanks @akx!

Full Changelog

• feat: add snapToPoint prop for custom snap behavior (#887)
• fix: preserve total width when snapping (#888)
• fix: avoid flicker when controlled pane sizes also change content (#889)
• fix: keep preventDefault working in the legacy mouse/touch bridge (#890)