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.dev
WebComponents.dev

use-parent

use-slot

Last modified 1yr ago