use-resize-observer

Observe the size change of a reference.

Module

import {
  useResizeObserver,
  useResizeObserverState,
} from "@atomico/hooks/use-resize-observer";

Syntax

useResizeObserver

useResizeObserver(
  ref,
  (rect) => void
);

Where:

• ref: Ref, reference to observe the resizing.

• rect: Object, the return of DOMRectReadOnly.toJSON(), documentation of DOMRect

  • width

  • height

  • x

  • y

  • top

  • right

  • bottom

  • left

useResizeObserverState

const rect = useResizeObserverState(ref);

Where:

• ref: Ref, reference to observe the resizing.

• rect: Object, the return of DOMRectReadOnly.toJSON(), documentation of DOMRect

  • width

  • height

  • x

  • y

  • top

  • right

  • bottom

  • left

Example

WebComponents.devWebComponents.dev