how can I set the default size in pixels instead of percentage?

[AshtonScalise]

is this supported or do I need to calc the percentage myself?

nvm I just do myself

if anyone wondering it is

({pixel size you want} / window.innerWidth) * 100

[bvaughn]

A more verbose answer, copied from #114:

---

Here is a way you could basically implement this in your application code:

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();
    };
  }, []);

---

Here my reasoning for not wanting to add it to the NPM package directly:

I think the problem with this is similar to the problem with external width/height props– either can change without PanelGroup/Panel re-rendering or being aware. (Example: an external stylesheet could define this style.)

So handling it fully would go from being something triggered only by pointer events to something that could be triggered by a lot of external things.

I don't think I want to try to support that level of complexity 😄

[cedeber]

Regarding that, why not offering something like that:

<PanelGroup>
  {(w, h) => (
    <Panel defaultSize={w(300)}>Hello, Panel</Panel>
  }
</PanelGroup>

w and h converting pixels to percentages from the Resize Observer width and height?

In this case it's probably easy to detect if the children is a function or not. And if not, just behave as normal.

onResize could offer the same with onResize(perc, w, h) { .. }

---

I am also wondering if PanelGroup and other components should not offer a "real" ref to have access to a dom node instead of the api, in order to attach a ResizeObserver. Then you can have apiRef to give access to the imperative APIs. (or domRef in addition, as long as it works it's ok either ways 😅)

[bvaughn]

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

---

❤️ → ☕ givebrian.coffee