Hope to support more property settings

[typekey]

This is a great job, but when setting defaultSize, maxSize, minSize and other attributes, only numbers are supported. In use, pixels need to be used to operate elements more precisely, and more setting methods are expected to be supported.

[bvaughn]

See this comment for an example of how to set pixel sizes: #47 (comment)

and also for rationale of why I don’t plan to add support for that to the library directly 🙇🏼

---

Here is an example of what I mean:
https://codesandbox.io/s/react-resizable-panels-forked-m5qf69?file=/src/App.js

  const MIN_SIZE_IN_PIXELS = 100;

  const [minSize, setMinSize] = useState(10);

  useLayoutEffect(() => {
    const panelGroup = document.querySelector('[data-panel-group-id="group"]');
    const resizeHandles = document.querySelectorAll(
      "[data-panel-resize-handle-id]"
    );
    const observer = new ResizeObserver(() => {
      let height = panelGroup.offsetHeight;

      resizeHandles.forEach((resizeHandle) => {
        height -= resizeHandle.offsetHeight;
      });

      // Minimum size in pixels is a percentage of the PanelGroup's height,
      // less the (fixed) height of the resize handles.
      setMinSize((MIN_SIZE_IN_PIXELS / height) * 100);
    });
    observer.observe(panelGroup);
    resizeHandles.forEach((resizeHandle) => {
      observer.observe(resizeHandle);
    });

    return () => {
      observer.disconnect();
    };
  }, []);

[bvaughn]

I think I have a possible solution for the pixel-based constraints; see #176

---

❤️ → ☕ givebrian.coffee