Skip to main content
react-md

useResizeListener 

function useResizeListener(options: ResizeListenerOptions): void;

The useResizeListener hook can be used to update React component functionality based on window resize events with a few performance optimizations.

The useWindowSize hook can be used for most cases unless handling the resize event does not rely on the window size.

Example Usage

The useResizeListener hook requires an onUpdate handler to be provided.

import { useResizeListener } from "@react-md/core/useResizeListener";
import { useState } from "react";

function Example() {
  const [size, setSize] = useState({
    height: window.innerHeight,
    width: window.innerWidth,
  });

  useResizeListener({
    onUpdate(event) {
      setSize({
        height: window.innerHeight,
        width: window.innerWidth,
      });
    },
  });

  return (
    <>
      The current window size:
      <pre>
        <code>{JSON.stringify(size, null, 2)}</code>
      </pre>
    </>
  );
}

Parameters

export interface ResizeListenerOptions extends AddEventListenerOptions {
  /**
   * This function will be called whenever the resize event is fired on the
   * `window`. This should be wrapped in `useCallback`.
   */
  onUpdate: (event: Event) => void;

  /**
   * Set this to `false` to disable throttling with
   * `window.requestAnimationFrame`.
   */
  throttle?: boolean;

  /**
   * Set this to `true` to disable attaching the resize event handler.
   *
   * @defaultValue `false`
   */
  disabled?: boolean;
}

Returns

Nothing.

See Also