useResizeObserver

Category

Browser

Hook that gives you resize observer state

import { useResizeObserver } from '@siberiacancode/reactuse';

Usage

const { ref, entries } = useResizeObserver();

Demo

source

Api

Parameters

Name	Type	Default	Note
options.enabled?	boolean	true	The IntersectionObserver options
options.box?	boolean	-	The IntersectionObserver options
options.onChange?	(entries: ResizeObserverEntry[], observer: ResizeObserver) => void	-	The callback to execute when resize is detected

Returns

UseResizeObserverReturn & { ref: (node: Target) => void }

Parameters

Name	Type	Default	Note
target	Target	-	The target element to observe
options.enabled?	boolean	true	The IntersectionObserver options
options.box?	boolean	-	The IntersectionObserver options
options.onChange?	(entries: ResizeObserverEntry[], observer: ResizeObserver) => void	-	The callback to execute when resize is detected

Returns

UseResizeObserverReturn

Contributors

Source • Demo