Add minSize/maxSize, but in pixels

[NepeinAV]

Hi! Can you add min/max panel size restrictions, but in pixels? Sometimes, if the window size becomes too small, panel content may shrink too much, which causes UI issues (overflows, etc.).

[bvaughn]

I understand why that would be convenient in some cases but I don’t think it’s something I want to support- because it would require changing the public api in a non obvious way: This library doesn’t control its own outer dimensions, so it couldn’t prevent panels from expanding/contracting past a certain point as its own width/height changed.

You should be able to accomplish this using minSize/maxSize and a min/max external height/width though!

[bvaughn]

Copying from #48 (comment) in case others see this issue.

---

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

[sleeyax]

If anyone is looking for a recent example to simply get the height of a panel to React state, you can use this hook I came up with (which is based on the original answer):

// usePanelHeight.ts

import { useLayoutEffect, useState } from "react";
import { getPanelElement } from "react-resizable-panels";

/**
 * Custom hook to get the height of a panel from `react-resizable-panels`.
 * @param id The id of the panel to get the height of.
 */
export function usePanelHeight(id: string) {
  const [height, setHeight] = useState<number>();

  useLayoutEffect(() => {
    const panelElement = getPanelElement(id);

    if (panelElement) {
      const observer = new ResizeObserver(() =>
        setHeight(panelElement.offsetHeight),
      );

      observer.observe(panelElement);

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

  return height;
}

Usage:

export function MyPanelsComponent() {
  const height = usePanelHeight("my-panel-id"); // the same id must be specified in the ResizablePanel below.

  return (
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel id="my-panel-id">
        <MyComponent panelHeight={height} />
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>
        <SomeOtherComponent />
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

[Albinzr]

@NepeinAV I think this can help you guys
a simple css

<ResizablePanel
minSize={2}
defaultSize={2}
style={{
"min-width": "40px",
"max-height":"400px"
}}
>

[johnstack94]

If anyone is looking for a recent example to simply get the height of a panel to React state, you can use this hook I came up with (which is based on the original answer):

// usePanelHeight.ts

import { useLayoutEffect, useState } from "react";
import { getPanelElement } from "react-resizable-panels";

/**
 * Custom hook to get the height of a panel from `react-resizable-panels`.
 * @param id The id of the panel to get the height of.
 */
export function usePanelHeight(id: string) {
  const [height, setHeight] = useState<number>();

  useLayoutEffect(() => {
    const panelElement = getPanelElement(id);

    if (panelElement) {
      const observer = new ResizeObserver(() =>
        setHeight(panelElement.offsetHeight),
      );

      observer.observe(panelElement);

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

  return height;
}

Usage:

export function MyPanelsComponent() {
  const height = usePanelHeight("my-panel-id"); // the same id must be specified in the ResizablePanel below.

  return (
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel id="my-panel-id">
        <MyComponent panelHeight={height} />
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel>
        <SomeOtherComponent />
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

How do you set the minSize/maxSize using this pattern?

[NepeinAV]

@NepeinAV I think this can help you guys

a simple css

<ResizablePanel

          minSize={2}

          defaultSize={2}

          style={{

            "min-width": "40px",

            "max-height":"400px"

          }}

        >

I ended up using "allotment", which works pretty well for me. For example, https://sql-academy.org/trainer/tasks/1

[johnstack94]

It doesn't have the collapsible panel feature tho. Otherwise seems nice.

[RomneyDa]

I don't think this has been brought up, if you have the container or screen dimensions, you can also just reverse calculate the percentage.

e.g.,

export function MyPanels() {
    const { width } = useContainerDimensions(); // or useScreenSize(), etc.
    const minSizePixels = 200;
    const minSizePercentage = minSizePixels / width * 100;
    return (
      <ResizablePanelGroup direction="horizontal">
        <ResizablePanel minSize={minSizePercentage}>Stuff 1</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel>Stuff 2 </ResizablePanel>
      </ResizablePanelGroup>
    );
}