useIntersectionObserver

Category

Browser

Hook that gives you intersection observer state

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

Usage

const { ref, entry, inView } = useIntersectionObserver();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	Target	-	The target element to detect intersection
options.enabled?	boolean	true	The IntersectionObserver options
options.onChange?	((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined	-	The callback to execute when intersection is detected
options.root?	IntersectionObserverInit['root'] | RefObject<Element | null | undefined>	-	The root element to observe

Returns

UseIntersectionObserverReturn

Parameters

Name	Type	Default	Note
options.enabled?	boolean	true	The IntersectionObserver options
options.onChange?	((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined	-	The callback to execute when intersection is detected
options.root?	IntersectionObserverInit['root'] | RefObject<Element | null | undefined>	-	The root element to observe

Returns

UseIntersectionObserverReturn & { ref: (node: Target) => void }

Contributors

Source • Demo