Elements

useResizeObserver

Observes one or more elements for size changes using the ResizeObserver API. Targets can be Ref, MaybeElement, or a plain Element.

Demo

Resize Observer

Resize the textarea to see width & height update.

width

0px

height

0px

Usage

Hook
Scope

import { 
import useRef$
useRef$, 
const useResizeObserver: (target: MaybeEventTarget | MaybeEventTarget[], callback: ResizeObserverCallback, options?: DeepMaybeObservable<UseResizeObserverOptions>) => UseResizeObserverReturn
useResizeObserver } from "@usels/web";
import { 
function useCallback<T extends Function>(callback: T, deps: DependencyList): T
useCallback will return a memoized version of the callback that only changes if one of the inputs
has changed.
@version ― 16.8.0
@see ― https://react.dev/reference/react/useCallback
useCallback } from "react";

function 
function Component(): JSX.Element
Component() {
  const 
const el$: any
el$ = 
import useRef$
useRef$<
interface HTMLDivElement
HTMLDivElement>();

  const 
const handleResize: ResizeObserverCallback
handleResize = 
useCallback<ResizeObserverCallback>(callback: ResizeObserverCallback, deps: DependencyList): ResizeObserverCallback
useCallback will return a memoized version of the callback that only changes if one of the inputs
has changed.
@version ― 16.8.0
@see ― https://react.dev/reference/react/useCallback
useCallback<
type ResizeObserverCallback = /*unresolved*/ any
ResizeObserverCallback>((
entries: any
entries) => {
    const { 
const width: any
width, 
const height: any
height } = 
entries: any
entries[0].
any
contentRect;
    
any
console.
any
log(
const width: any
width, 
const height: any
height);
  }, []);

  
function useResizeObserver(target: MaybeEventTarget | MaybeEventTarget[], callback: ResizeObserverCallback, options?: DeepMaybeObservable<UseResizeObserverOptions>): UseResizeObserverReturn
useResizeObserver(
const el$: any
el$, 
const handleResize: ResizeObserverCallback
handleResize);

  return <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div 
RefAttributes<HTMLDivElement>.ref?: Ref<HTMLDivElement> | undefined
Allows getting a ref to the component instance.
Once the component unmounts, React will set ref.current to null
(or call the ref with null if you passed a callback ref).
@see ― https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs
ref={
const el$: any
el$} />;
}

import { createResizeObserver } from "@usels/web";
import { createRef$ } from "@usels/core";

function Component() {
  "use scope"
  const el$ = createRef$<HTMLDivElement>();

  createResizeObserver(el$, (entries) => {
    const { width, height } = entries[0].contentRect;
    console.log(width, height);
  });

  return <div ref={el$} />;
}

With `border-box`

Hook
Scope

useResizeObserver(el$, handleResize, { box: "border-box" });

createResizeObserver(el$, handleResize, { box: "border-box" });

Stopping observation manually

Hook
Scope

const { stop } = useResizeObserver(el$, handleResize);

stop();

const { stop } = createResizeObserver(el$, handleResize);

stop();

const { isSupported$ } = useResizeObserver(el$, handleResize);

console.log(isSupported$.get()); // Observable<boolean>

const { isSupported$ } = createResizeObserver(el$, handleResize);

console.log(isSupported$.get()); // Observable<boolean>

Type

Parameters

Parameter	Type	Description
`target`	`MaybeEventTarget \| MaybeEventTarget[]`	-
`callback`	`ResizeObserverCallback`	-
`options`	`UseResizeObserverOptions` (optional)	-

UseResizeObserverOptions

Option	Type	Default	Description
`box`	`"content-box" \| "border-box" \| "device-pixel-content-box"`	`-`	-

Returns

UseResizeObserverReturn

Name	Type	Description
`stop`	`() => void`	-
`isSupported$`	`ReadonlyObservable<boolean>`	-

Source

View on GitHub