use-resize-observer

Tracks element size and position changes with ResizeObserver

Source

View source code

Docs

Edit this page

PackageIcon

@mantine/hooks

Usage

Resize me!

Resize element by dragging its right bottom corner
Property	Value
width	0
height	0

import { Group, Table } from '@mantine/core';
import { useResizeObserver } from '@mantine/hooks';

function Demo() {
  const [ref, rect] = useResizeObserver();

  return (
    <div className={classes.root}>
      <Group justify="center">
        <div ref={ref} className={classes.demo}>
          Resize me!
        </div>
      </Group>

      <Table
        captionSide="top"
        data={{
          caption: 'Resize element by dragging its right bottom corner',
          head: ['Property', 'Value'],
          body: [
            ['width', rect.width],
            ['height', rect.height],
          ],
        }}
      />
    </div>
  );
}

The use-resize-observer hook returns a ref object that should be passed to the observed element, and the current element content rect, as returned by the ResizeObserver's callback entry.contentRect. See the Resize Observer API documentation to learn more. On the first render (as well as during SSR), or when no element is being observed, all of the properties are equal to 0.

import { useResizeObserver } from '@mantine/hooks';

function Demo() {
  const [ref, rect] = useResizeObserver();
  return <div ref={ref}>Observed</div>;
}

See also the use-element-size hook in case you need to subscribe only to width and height.

Definition

type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;

function useResizeObserver<T extends HTMLElement = any>(
  options?: ResizeObserverOptions
): readonly [React.RefObject<T>, ObserverRect];

use-reduced-motion

use-scroll-into-view