Visx: ParentSize component increases svg's hight non-stop

[m0t0r]

Hi,

First of all, thanks a lot for this project! I am doing my first steps but very impressed how comprehensive it is 👏

I am trying to build my first chart and I want to make it responsive from the start. I've added <ParentSize/> component and setup svg to use width and height but then noticed that svg's height is growing non-stop. I am not sure whether I am doing something wrong or there is an issue.

Here is a simple repro: https://codesandbox.io/s/laughing-easley-9ikuq Please inspect with devtools and you will see svg's height is increasing.

Thanks

[hshoff]

Hi @m0t0r, thanks for checking out visx.

gets { width, height } from the parent/containing div. In this case, that div has no width/height set so its width/height are set based on the children. So there's an infinite loop here as parent updates => children updates => parent updates.

Adding height to the container fixes it. https://codesandbox.io/s/suspicious-ptolemy-l5w6g?file=/src/App.tsx:792-819

hope this helps!

[peterwiebe]

@hshoff is there a way to make it watch for max-height?

[hshoff]

@peterwiebe a quick workaround is to clamp it at the <ParentSize> call site: https://codesandbox.io/s/sad-napier-cod4u?file=/src/App.tsx:355-648

<ParentSize>
  {({ width, height }) => {
    const maxHeight = 500;
    const h = Math.min(height, maxHeight);
    return (
      <svg width={width} height={h}>
        <rect width={width} height={h} fill="blue" />
      </svg>
    );
  }}
</ParentSize>