A React hook that handles element resizes using native ResizeObserver.

npm i @utilityjs/use-resize-sensor | yarn add @utilityjs/use-resize-sensor

Usage

import useResizeSensor from "@utilityjs/use-resize-sensor";
import * as React from "react";

const Component = () => {
  const { width, height, registerNode } = useResizeSensor();

  return <div ref={registerNode}>Width: {width} | Height: {height}</div>
};

API

useResizeSensor(refreshOptions?)

interface RefreshOptions {
  mode: "debounce" | "throttle";
  rate?: number;
  leading?: boolean;
  trailing?: boolean;
}

declare const useResizeSensor: (
  refreshOptions?: RefreshOptions | undefined
) => {
  width: number;
  height: number;
  registerNode: <T extends HTMLElement>(node: T | null) => void;
};

refreshOptions

The options to adjust the refresh/tick behavior.

refreshOptions.mode

Values: throttle(Documentation) | debounce(Documentation) | undefined

refreshOptions.rate | Default: 250

The number of milliseconds to either delay or throttle invocations to.

refreshOptions.leading | Default: (true for throttle mode / false for debounce mode)

Specify invoking on the leading edge of the timeout.

refreshOptions.trailing | Default: true

Specify invoking on the trailing edge of the timeout.