React viewport detect

A React hook to detect if an HTML Element has been display in the viewport. This is easy to use. You just have to provide an react ref. By default it freeze the value when the element has been display. That is nice to triggered one time animation !

Demo

example page

Usage

Basic Usage

1import {useViewportDetection} from "react-viewport-detect";
2import {useRef, useEffect} from "react" ;
3
4const App () => {
5    
6    const ref = useRef() ; 
7    const isVisible = useViewportDetection(ref) ;
8
9    useEffect(() => {
10        console.log(isVisible) ;
11    },[isVisible]) ;
12    
13    return (
14        <div>
15            <h1>React visible hook</h1>
16            <div ref={ref} >
17                <p>
18                    Do I am visible ? 
19                </p>
20            </div>
21        </div>
22    );
23    
24};

Advanced

1import {useViewportDetection} from "react-viewport-detect";
2import {useRef, useEffect} from "react" ;
3
4const App () => {
5    
6    const ref = useRef() ; 
7    const isVisible = useViewportDetection(ref, {freeze: false, threshold: 1}) ;
8
9    useEffect(() => {
10        console.log(isVisible) ;
11    },[isVisible]) ;
12    
13    return (
14        <div>
15            <h1>React visible hook</h1>
16            <div ref={ref} >
17                <p>
18                    Do I am visible ? 
19                </p>
20            </div>
21        </div>
22    );
23    
24};

Function parameters

useViewportDetection

Parameter	Type	Description	Default
ref	React ref	The React ref to detect	none
{rootMargin, root, threshold, freeze}	Array	Intersection Observer options + freeze. Freeze is to keep the value when it has been display once	{rootMargin = 0px, root = null, threshold = 0, freeze = true}

More about Intersection Observer options

Next steps

• TypeScript Support
• Improve the DX
• Unit Testing

Contributing

Contributions are always welcome! You can create a new pull request with changes or create a new issue and I will update this project