useResizeObserver
一个 React 钩子（Hook），用来利用 ResizeObserver API 观察元素大小的变化。
演示
用法
请查看 API。
源码
API
const { observerRef, isSupported, ...controls } = useResizeObserver(callback, options)
回调函数 Callback
ResizeObserverCallback 函数，当观察者被触发时将被调用。
选项 Options
export interface UseWebObserverOptions {
/**
* 在调用此函数后立即开始观察
*
* @defaultValue true
*/
immediate?: boolean
}
interface ResizeObserverOptions {
box?: ResizeObserverBoxOptions
}
export interface UseResizeObserverOptions extends UseWebObserverOptions, ResizeObserverOptions {
/** @defaultValue 'content-box' */
box?: ResizeObserverBoxOptions
}
返回值
返回值中包含可暂停、恢复的 Pausable 实例。
更多详情，请参见 Pausable。
export type UseWebObserverReturns<Observer> = Pausable & {
/**
* 保存观察者实例的 ref
*/
observerRef: React.MutableRefObject<Observer | null>
/**
* 检查当前环境是否支持观察者
*/
isSupported: boolean
}
export interface UseResizeObserverReturns extends Pausable, UseWebObserverReturns<ResizeObserver> {}
