ElementBounds

[brigand]

For more advanced layout, sometimes CSS doesn't offer what you need.

We can get the element size for children with a callback. By default, this gets the size on every render, and calls the onChange callback only when the size has changed. You do have to be careful to not cause infinite render cycles.

const SizeDisplay = (props) => (
  <ElementBounds onChange={({ width, height, top, right, bottom, left }) => {
    console.log(width, height);
  }}>
    <img src="cats.png" />
  </ElementBounds>
);

Sometimes a child resizes on its own. This could be a component that maintains its own state. We can use an element resize listener to call the callback when the child resizes, even if the component rendering ElementBounds doesn't cause it by rendering.

<ElementBounds useResizeListener

It also has a 'render child' variant, which can be useful for rendering things like a DataSource. On the initial render, all properties (width, height, top, etc.) will be 'null'.

<ElementBounds>
  {({ width, height }) => (
    <div>
      <img src="cats.png" />
      <DataSource id="foo" value={{ width, height }} />
    </div>
  )}
</ElementBounds>

[nullhook]

This has some potential to be on rearm's toolbelt. However, more hooks friendly.