[FEAT] Snap Points: Predefined sizes to get snapped to.

[abhay-ramesh]

Was looking if we can have a feature like snap points where the Resize handle snaps to predefined sizes.

I went through and with help of ChatGPT got this, but im unsatisfied by it and was looking if anyone can think of a better api design and implementation built right into the library

import React, { useState } from "react";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";

const snapPoints = [25, 50, 75]; // Define your snap points here

const SnapResizablePanels = () => {
  const [sizes, setSizes] = useState([33, 34, 33]); // Example initial sizes

  const handleResize = newSizes => {
    // Find the nearest snap point for each panel
    const snappedSizes = newSizes.map(size => {
      const nearestSnapPoint = snapPoints.reduce((prev, curr) => {
        return Math.abs(curr - size) < Math.abs(prev - size) ? curr : prev;
      });
      return nearestSnapPoint;
    });

    setSizes(snappedSizes);
  };

  return (
    <PanelGroup direction="horizontal" onLayout={handleResize}>
      <Panel defaultSizePercentage={sizes[0]}>
        {/* Content for panel 1 */}
      </Panel>
      <PanelResizeHandle />
      <Panel defaultSizePercentage={sizes[1]}>
        {/* Content for panel 2 */}
      </Panel>
      <PanelResizeHandle />
      <Panel defaultSizePercentage={sizes[2]}>
        {/* Content for panel 3 */}
      </Panel>
    </PanelGroup>
  );
};

export default SnapResizablePanels;

[bvaughn]

This is not a feature that I am interested in building or adding to this library at the current time 🙇🏼 Thanks for understanding