useResizeObserver

Observe a element size changing.

API

function useResizeObserver(
  target: EffectTarget<Element>,
  listener: (entries: ResizeObserverEntry[]) => void
): void;

type Nullable<T> = T | undefined | null;
type EffectTarget<T> =
  | Nullable<T>
  | (() => Nullable<T>)
  | { current: Nullable<T> };

Example

Container size change times: 0

import React, { useRef, useState } from "react";
import { useResizeObserver } from "@lilib/hooks";

function Example() {
  const [count, setCount] = useState(0);
  const containerRef = useRef(null);

  useResizeObserver(containerRef, () => {
    setCount((count) => ++count);
  });

  return <div ref={containerRef}>Container size change times: {count}</div>;
}

export default Example;