useOnScreen
IntersectionObserver wrapper to check if an element is visible.
Scroll down to see the target element.
Is target visible in viewport?No
Usage Example
1import { useRef } from 'react';
2import { useOnScreen } from '@danixsoft/hooks';
3
4function LazyImage() {
5 const ref = useRef<HTMLDivElement>(null);
6 const isVisible = useOnScreen(ref);
7
8 return (
9 <div ref={ref}>
10 {isVisible ? <img src="huge-image.jpg" /> : <p>Loading image...</p>}
11 </div>
12 );
13}