useResizeObserver

browser

test coverage

Last changed: 24 days ago

TIP

This hook uses ResizeObserver browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Hook that gives you resize observer state

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

Usage

const { ref, entries } = useResizeObserver();
// or
const { entries } = useResizeObserver(ref);

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: StateRef<Target> }

Parameters

Name	Type	Default	Note
target	HookTarget	-	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

Source

Source • Demo

Contributors

debabin