useIntersectionObserver
A React Hook that uses the Intersection Observer API with ease.
Demo
Try to scroll down to see the effect.
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const obsererReturn = useIntersectionObserver(elementTarget, options)
ElementTarget
ElementTarget is a union type that represents various kinds of elements that can be targeted.
See ElementTarget or ElementTarget Types for more details.
Options
export interface UseWebObserverOptions {
/**
* Start the observer immediate after calling this function
*
* @defaultValue true
*/
immediate?: boolean
}
/**
* DOM built-in 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
Returns
Retuerns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export interface UseWebObserverReturns<Observer> extends 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 type UseIntersectionObserverReturns = UseWebObserverReturns<IntersectionObserver>
