useElementSize

useElementSize

Tracks the width and height of an HTML element in real-time. It accurately responds to window resizing, CSS layout shifts, and dynamic content changes without relying on expensive window.onresize listeners.

Usage Examples

Basic

Measuring a dynamically resizing element to render its exact dimensions.

import { useRef } from "react";
import { useElementSize } from "react-hook-lab";

function ResizableBox() {
  const boxRef = useRef<HTMLDivElement>(null);
  const { width, height } = useElementSize(boxRef);

  return (
    <div 
      ref={boxRef} 
      style={{ width: "50%", minHeight: 200, resize: "both", overflow: "auto", border: "2px solid blue" }}
    >
      <p>I am {Math.round(width)}px wide and {Math.round(height)}px tall.</p>
    </div>
  );
}

Common

Using the element's width to conditionally render internal UI (a "Container Query" pattern) instead of relying on global CSS media queries.

import { useRef } from "react";
import { useElementSize } from "react-hook-lab";

function DashboardWidget() {
  const widgetRef = useRef<HTMLDivElement>(null);
  const { width } = useElementSize(widgetRef);

  // If the widget is squished smaller than 400px, render a compact view
  const isCompact = width < 400;

  return (
    <div ref={widgetRef} className="widget-container">
      {isCompact ? <CompactChart /> : <FullDetailedChart />}
    </div>
  );
}

Advanced

Combining useElementSize with SVG rendering to draw perfectly responsive graphics that exactly fill their parent container.

import { useRef } from "react";
import { useElementSize } from "react-hook-lab";

function ResponsiveGraph() {
  const containerRef = useRef<HTMLDivElement>(null);
  const { width, height } = useElementSize(containerRef);

  return (
    <div ref={containerRef} style={{ width: "100%", height: "300px" }}>
      {width > 0 && (
        <svg width={width} height={height}>
          <circle cx={width / 2} cy={height / 2} r={Math.min(width, height) / 3} fill="purple" />
          <text x={width / 2} y={height / 2 + 5} textAnchor="middle" fill="white">
            Perfectly Centered
          </text>
        </svg>
      )}
    </div>
  );
}

API Reference

Parameters

• ref
  • Type: RefObject<HTMLElement>
  • Description: The React ref attached to the DOM element you want to measure.

Return Object

Returns an object of type ElementSize containing:

• width (number): The exact pixel width of the element.
• height (number): The exact pixel height of the element.

(Note: Initially, before the element mounts and is measured, both width and height will be 0)

Core Working

useElementSize is actually a streamlined alias wrapper around our underlying useResizeObserver hook. Instead of returning the complex, raw ResizeObserverEntry, this hook destructures out just the contentRect.width and contentRect.height for maximum convenience.

It utilizes the native browser ResizeObserver API, which hooks deep into the browser's layout engine. This means it catches size changes triggered by CSS animations, flexbox reflows, or sibling elements being added/removed, without the massive performance penalty of attaching generic window.resize listeners.