Nihilistic Pool Man

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

    2.0.21 • 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>
        );
    }

    Using custom container

    const YourApp = () => {
        return (
            <TrackVisibility container={refContainer}>
                <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>
        );
    }

    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 on or many react components
    style object - Style attributes
    className string - Css classes
    container React Ref window Custom ref container
    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

    Contributions

    Any contributions is welcome !

    • Lint : $ npm run lint
    • Test : $ npm run test
    • Build : $ npm run build // will lint and run test before

    Release Notes

    v2.0.4

    • Recalculate on props change.

    v2.0.2

    • Add check for component bottom up to stop whole page being visible
    • Push componentDidMount isComponentVisible call into next tick

    v2.0.1

    • Fix issue #9. The component was not updated on prop changes

    v2.0.0

    • Added support for partial visibility. Thanks to audiolion
    • Internal rewrite
    • CI intregration
    • Better Test suite
    • Typescript definition !

    v1.1.4

    • React and react-dom are now peer dependencies

    v1.1.1

    • switched to webpack2
    • Upgraded to stand alone prop-types

    License

    Licensed under MIT

    Install

    npm i @lskjs/react-on-screen

    DownloadsWeekly Downloads

    1

    Version

    2.0.21

    License

    MIT

    Unpacked Size

    325 kB

    Total Files

    10

    Last publish

    Collaborators

    • finalgetname
    • vladik_deniska
    • isuvorov
    • yukioru
    • andru_xa
    • natavts
    • blacklightburn
    • ga2mer
    • iburey
    • kafkae
    • sophiyabezruk