# All files / src useResizeListener.ts

98.03% Statements 100/102
75% Branches 3/4
100% Functions 1/1
98.03% Lines 100/102

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    1031x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    7x

    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    61x
    61x
     "use client";
    import { useEffect } from "react";
    import { delegateEvent } from "./delegateEvent.js";
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    import { useResizeObserver } from "./useResizeObserver.js";

    /**
     * @remarks \@since 6.0.0  Updated the API
     */
    export interface ResizeListenerOptions extends AddEventListenerOptions {
      /**
       * Set this to `false` to disable throttling with
       * `window.requestAnimationFrame`.
       *
       * @defaultValue `true`
       */
      throttle?: boolean;

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

      /**
       * This function will be called whenever the resize event is fired on the
       * `window`. This should be wrapped in `useCallback`.
       */
      onUpdate(event: Event): void;
    }

    /**
     * This hook can be used to listen to the entire window resizing. If you need to
     * observe specific elements resizing, check out the {@link useResizeObserver}
     * hook instead.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { useResizeListener } from "@react-md/core";
     * import type { ReactElement } from "react";
     * import { useState } from "react";
     *
     * function Example(): ReactElement {
     *   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>
     *     </>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0  Updated the API to match the `useResizeObserver` and
     * `useIntersectionObserver` hooks by having an `onUpdate` callback and include
     * the `AddEventListenerOptions` as part of the hook options.
     */
    export function useResizeListener(options: ResizeListenerOptions): void {
      const {
        once,
        signal,
        capture,
        passive,
        throttle = true,
        disabled = false,
        onUpdate,
      } = options;

      useEffect(() => {
        if (disabled) {
          return;
        }

        const eventHandler = delegateEvent("resize", window, throttle, {
          once,
          signal,
          capture,
          passive,
        });
        eventHandler.add(onUpdate);

        window.dispatchEvent(new Event("resize"));
        return () => {
          eventHandler.remove(onUpdate);
        };
      }, [capture, disabled, onUpdate, once, passive, signal, throttle]);
    }