React viewport detect

This is a React hook easy to use. This hook allow you to know if an element is present in the current viewport. It returns you a boolean. The boolean will be set at true when the element appear on the viewport but only once.

Installation

npm i react-viewport-detect

Usage

To use this package you need a React ref. By default the value is 'False'. Once the ref is present in the VP the boolean will be set at true.

import useVisible from "react-viewport-detect";
import {ref} from "react" ;

const App () => {
    
    const ref = ref() ; 
    const isVisible = useVisible(ref) ;
    
    
    return (
        <div>
            <h1>React visible hook</h1>
            <div ref={ref} >
                <p>
                    Do I am visible ? 
                </p>
            </div>
        </div>
    );
    
};

Licence

GPL 3

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Authors

• Alexandre BAUDRY