Use-on-screen NPM

Use On Screen

use-on-screen is a React Hooks library used to detect if a certain element is visible on the screen, both in a scrollable container and in the window.

Installation ⚙️

Use the package manager npm to install use-on-screen.

npm install use-on-screen

Usage 🛠️

// ...
import useOnScreen from "use-on-screen";

function FakeFeed() {
    const [visible, position] = useOnScreen({
        target: "#loader", // default: ""
        parent: "#feed", 
        // if the parent is not defined, 
        // it will consider the entire user's viewport
        delay: 500 // default: 1000
    });
    
    // ...
    
    // Use useEffect() to call a function when element is visible
    useEffect(() => {
        if (visible) {
            loadMorePosts();
            console.log(position);
        }
    }, [visible]);

    // ...

    return (
        <section id="feed">
            {/*
                Many other posts over here...
            */}
            <span id="loader"></span> {/* if visible, it will 
            load more posts*/}
        </section>
    );
}