The useDimensions Hook

The problem

All the chart components we've built so far include an SVG element with fixed dimensions. For instance, a basic barplot component looks like this:

export const Barplot = () => {
  const width = 800;
  const height = 400;

  return (
    <svg width={width} height={height}>
      {/* bars, axes, etc. */}
    </svg>
  );
};

We've hardcoded the width and height so far, but in real life this doesn't work. If you set a width of 800px for someone reading on a 600px-wide tablet, the chart will be cropped.

In practice, the chart is always wrapped in a fluid div with a controlled size → often taking the full width of its container.

Our first step is to listen to that div's dimensions and retrieve its width and height whenever they change. Basically, we need the 2 big numbers below.