useIntersectionObserver

browser

test coverage

Last changed: 24 days ago

Hook that gives you intersection observer state

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

Usage

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

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	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?	HookTarget	-	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?	HookTarget	-	The root element to observe

Returns

UseIntersectionObserverReturn & { ref: StateRef<Target> }

Source

Source • Demo

Contributors

debabin