useElementSize
Hooks

useElementSize

An element's content-box size, tracked through resizes.

Signature

SignatureTypeScript
function useElementSize<T extends HTMLElement>(ref: {
  current: T | null;
}): { width: number; height: number };

Usage

DataGrid and VirtualList use it to resolve a viewport height given as a string ("100%", "60vh"), which is only knowable after layout.

ExampleTSX
import { useRef } from "react";
import { useElementSize } from "@solarius/onset";

function Window({ height = "100%" }: { height?: number | string }) {
  const viewportRef = useRef<HTMLDivElement>(null);
  const measured = useElementSize(viewportRef).height;
  const viewportHeight =
    measured || (typeof height === "number" ? height : 320);

  return (
    <div ref={viewportRef} style={{ height }}>
      <output>Viewport height: {viewportHeight} px</output>
    </div>
  );
}

Use a ResizeObserver directly when resize events trigger imperative updates without rendering. Storing dimensions in React state triggers a render when the dimensions change.