Initial size based on content?

[dkozar]

Hi,

I'd like to use the split pane in horizontal mode (first panel above, second one below).

When the split pane is mounted, I'd like to determine the top/bottom section sizes based on their contents (so there are no individual scrollbars apart from the page scrollbar).

Is this possible to do?

Thanks!

[cwellsx]

It's possible.

• React.useRef to get a ref which you associate with your element you want to measure.
• React.useEffect to run some code after your component renders for the first time
• In the useEffect, read the properties of the HTML element e.g. its clientHeight
• Use that height, now that you know it, to set/reset the size of the pane
• And maybe [once, setOnce = React.useState(false) which you use to ensure that you do the above only once/initially

[rickIsHere-199]

I'm searching similar, share if any body found it

[tomkp]

This can be achieved in v3 using controlled mode and refs as @cwellsx suggested:

function App() {
  const contentRef = useRef<HTMLDivElement>(null);
  const [sizes, setSizes] = useState<number[]>([]);

  useEffect(() => {
    if (contentRef.current) {
      setSizes([contentRef.current.scrollHeight, null]);
    }
  }, []);

  return (
    <SplitPane direction="vertical" onResize={setSizes}>
      <Pane size={sizes[0]}>
        <div ref={contentRef}>Content that determines size</div>
      </Pane>
      <Pane size={sizes[1]}>Second pane</Pane>
    </SplitPane>
  );
}

Closing as this can be implemented with the current API.