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 !

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import {useViewportDetection} from "react-viewport-detect";
import {useRef, useEffect} from "react" ;

const App () => {
    
    const ref = useRef() ; 
    const isVisible = useViewportDetection(ref, {
        freeze: false, threshold: 1
    }) ;

    useEffect(() => {
        console.log(isVisible) ;
    },[isVisible]) ;
    
    return (
        <div>
            <h1>React visible hook</h1>
            <div ref={ref} >
                <p>
                    Do I am visible ? 
                </p>
            </div>
        </div>
    );
    
};