useResizeObserver
A React Hook that helps to use ResizeObserver API to observe the size changes of an element.
Demo
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const { observerRef, isSupported, ...controls } = useResizeObserver(callback, options)
Callback
ResizeObserverCallback function that will be called when the observer is triggered.
Options
export interface UseWebObserverOptions {
/**
* Start the observer immediate after calling this function
*
* @defaultValue true
*/
immediate?: boolean
}
interface ResizeObserverOptions {
box?: ResizeObserverBoxOptions
}
export interface UseResizeObserverOptions extends UseWebObserverOptions, ResizeObserverOptions {
/** @defaultValue 'content-box' */
box?: ResizeObserverBoxOptions
}
Returns
Retuerns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export type UseWebObserverReturns<Observer> = Pausable & {
/**
* ref that holds the observer instance
*/
observerRef: React.MutableRefObject<Observer | null>
/**
* Check if the observer is supported in the current environment
*/
isSupported: boolean
}
export interface UseResizeObserverReturns extends Pausable, UseWebObserverReturns<ResizeObserver> {}
