REACT LAZY LOAD

React Lazy Loading - It is easy to integrate with React to Lazyload components, Images, etc. Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages. Internally used Intersection Observer API

Installation

React Lazy Load requires React v16.8 or later.

npm install --save react-observer-api

Demo

Usage

1. Using Hook

isVisible will be true once DOM is visible in the viewport.
setElement need to pass it to the ref as shown below.

    import { useVisibilityHook } from 'react-lazyloading';

    export default () => {
        const { setElement, isVisible } = useVisibilityHook();

        useEffect(() => {
            if (isVisible) {
                ...Logics/API call can trigger by watching isVisible property
            }
        }, [isVisible])

        return {
            <div ref={setElement}>
                {isVisible && (
                    <>
                        ...Component need to render goes here....
                    <>
                )}
            </div>
        }
    }

Config Options - Optional

It allow to pass config options as param (optional).

    {
        root: null,
        rootMargin: '0px',
        threshold: 1.0
    }

For more details about options and usage, Click here

    import { useVisibilityHook } from 'react-lazyloading';

    export default () => {
        const { setElement, isVisible } = useVisibilityHook({
            threshold: 0.5,
            rootMargin: '100px'
        });
        ...
    }

Force Visible

For some case, based on condition/logic may need to show the dom before it reaches to viewport. In that scenario, by calling forceVisible() will load the dom.

    import { useVisibilityHook } from 'react-lazyloading';

    export default () => {
        const { setElement, isVisible, forceVisible } = useVisibilityHook();

        useEffect(() => {
            forceVisible(); // isVisible become true, by manually calling this method.
        }, [])
        
        return {
            <div ref={setElement}>
                {isVisible && (
                    <>
                        ...Component need to render goes here....
                    <>
                )}
            </div>
        }
    }

2. Using Component

The above same can achieved through Component as well. Need to wrap LazyLoad on top of the component for lazyloading

    import { LazyLoad } from 'react-lazyloading';

    export default () => {
        
        return {
            <LazyLoad>
                <>...Component goes here....</>
            </LazyLoad>
        }
    }

Optional Props

Example

    import { LazyLoad } from 'react-lazyloading';

    export default () => {
        const style = {
            padding: 10
        };
        return {
            <LazyLoad as="span" style={style} forceVisible>
                <>...Component goes here....</>
            </LazyLoad>
        }
    }

Note

For IE support, need to add polyfill

Licence

MIT