Wondering what’s next for npm?Check out our public roadmap! »

    react-on-screen
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    React on screen npm npm license Coverage Status

    😎 Check if your react component are visible on the screen without pain and with performance in mind 😎!

    react-on-screen-demo

    Demo

    View the demo.

    Installation

    $ npm install --save react-on-screen
    $ yarn add react-on-screen
    

    A UMD build is also available :

    <script src="./dist/ReactOnScreen.min.js"></script>

    Usage

    Simple

    import React from 'react';
    import TrackVisibility from 'react-on-screen';
     
    const ComponentToTrack = ({ isVisible }) => {
        const style = {
            background: isVisible ? 'red' : 'blue'
        };
        return <div style={style}>Hello</div>;
    }
     
    const YourApp = () => {
        return (
           {/* Some Stuff */}
            <TrackVisibility>
                <ComponentToTrack />
            </TrackVisibility>
           {/* Some Stuff */}
        );
    }

    Using a render props

    You can use a render props is you want to !

    const YourApp = () => {
        return (
            <TrackVisibility>
                {({ isVisible }) => isVisible && <ComponentToTrack />}
            </TrackVisibility>
        );
    }

    Track the visibility only once

    For many cases you may want to track the visibility only once. This can be done simply as follow :

    const YourApp = () => {
        return (
            <TrackVisibility once>
                <ComponentToTrack />
            </TrackVisibility>
        );
    }

    Defining offset

    Using offset props can be usefull if you want to lazy load an image for instance.

    const YourApp = () => {
        return (
            <TrackVisibility offset={1000}>
                {({ isVisible }) => isVisible ? <ComponentToTrack /> : <Loading />}
            </TrackVisibility>
        );
    }

    Partial visibility

    You may want to consider that a component is visible as soon as a part of the component is visible on screen. You can use the partialVisibility props for that.

    const YourApp = () => {
        return (
            <TrackVisibility partialVisibility>
                {({ isVisible }) => <ComponentToTrack />}
            </TrackVisibility>
        );
    }

    Use the html tag of your choice

    const YourApp = () => {
        return (
            <TrackVisibility partialVisibility tag="h1">
                {({ isVisible }) => <ComponentToTrack />}
            </TrackVisibility>
        );
    }

    Api

    props type default description
    once bool false If set to true track the visibility only once and remove the event listeners
    throttleInterval int 150 Tweak the event listeners. See David Corbacho's article
    children React Components - Can be one or many react components
    style object - Style attributes
    className string - Css classes
    offset number 0 Allows you to specify how far left or above of the viewport you want to set isVisible to true
    partialVisibility bool false Set isVisible to true on element as soon as any part is in the viewport
    tag string div Allows specifying html tag of your choice

    Contributions

    Any contributions is welcome !

    • Develop: $ yarn start
    • Lint : $ yarn lint
    • Test : $ yarn test
    • Build : $ yarn build // will lint and run test before

    License

    Licensed under MIT

    Install

    npm i react-on-screen

    DownloadsWeekly Downloads

    10,929

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    283 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar