use-resize-observer
Observe the size change of a reference.

Module

1
import {
2
useResizeObserver,
3
useResizeObserverState,
4
} from "@atomico/hooks/use-resize-observer";
Copied!

Syntax

useResizeObserver

1
useResizeObserver(
2
ref,
3
(rect) => void
4
);
Copied!
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

1
const rect = useResizeObserverState(ref);
Copied!
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
Last modified 2mo ago