Skip to content

useIntersectionObserver ​

browser
test coverage
Last changed: 5 days ago

TIP

This hook uses IntersectionObserver browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Hook that gives you intersection observer state

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

Usage ​

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

Demo ​

Api ​

Parameters

NameTypeDefaultNote
targetHookTarget-The target element to detect intersection
options.enabled?booleantrueThe 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

Parameters

NameTypeDefaultNote
options.enabled?booleantrueThe 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

Source ​

Source • Demo

Contributors ​

Avatardebabin

Released under the MIT License.