useIntersectionObserver
一个简易使用 Intersection Observer API 的 React 钩子。
演示
尝试向下滚动查看效果。
用法
请查看 API。
源码
API
const obsererReturn = useIntersectionObserver(elementTarget, options)
元素目标 ElementTarget
ElementTarget 是一个联合类型，代表可以被定位的各种元素。
更多详情，请参见 ElementTarget 或 ElementTarget 类型。
选项 Options
export interface UseWebObserverOptions {
/**
* 调用此函数后立即开始观察
*
* @defaultValue true
*/
immediate?: boolean
}
/**
* DOM 内建的 IntersectionObserverInit
*
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/IntersectionObserver#options
*/
interface IntersectionObserverInit {
root?: Element | Document | null
rootMargin?: string
threshold?: number | number[]
}
export type UseIntersectionObserverOptions = UseWebObserverOptions & IntersectionObserverInit
返回值
Retuerns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export interface UseWebObserverReturns<Observer> extends Pausable {
/**
* 持有观察者实例的 ref
*/
observerRef: React.MutableRefObject<Observer | null>
/**
* 检查当前环境是否支持观察者
*/
isSupported: boolean
}
export type UseIntersectionObserverReturns = UseWebObserverReturns<IntersectionObserver>
