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
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 |
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 |