Repository files navigation

React Lazy Loading - It is easy to integrate with React to Lazyload components, Images, etc. It will monitor element and tell you when element enters into the viewport. So that can perform any operation when the component in viewport and initial load will get reduce. 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 usedIntersection Observer API

💥💥💥React library for Multiselect Dropdown.Check it Out 💥💥💥

• 🎧Hooks or Component - WithuseVisibilityHook it's easier to monitor elements and perform any operations.
• 🔥Performance - No multiple listener for scroll, resize, etc.
• 🔦Bundle - Light weight, ~3.5kb
• 🎁Features -forceVisible,forceCheck to manually perform operations.
• 💥Memory optimization - Observer will disconnect once component reached viewport/unmount

React Lazy Load requires React v16.8 or later.

npm install --save react-observer-api

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-observer-api';exportdefault()=>{const{ setElement, isVisible}=useVisibilityHook();useEffect(()=>{if(isVisible){            ...Logics/APIcallcantriggerbywatchingisVisibleproperty}},[isVisible])return{<divref={setElement}>{isVisible&&(<>                    ...Component need to render goes here....<>            )}</div>}}

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

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

For more details about options and usage,Click here

import{useVisibilityHook}from'react-observer-api';exportdefault()=>{const{ setElement, isVisible}=useVisibilityHook({threshold:0.5,rootMargin:'100px',always:false});    ...}

For some cases, you may want to continue to observe the dom node as it enters and exits the viewport. In this scenario, passingalways: true in the config will enable this.

useVisibilityHook({always:true});<LazyLoadconfig={{always:true}}>

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

import{useVisibilityHook}from'react-observer-api';exportdefault()=>{const{ setElement, isVisible, forceVisible}=useVisibilityHook();useEffect(()=>{forceVisible();// isVisible become true, by manually calling this method.},[])return{<divref={setElement}>{isVisible&&(<>                    ...Component need to render goes here....<>            )}</div>}}

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

import{LazyLoad}from'react-observer-api';exportdefault()=>{return{<LazyLoad><>...Component goes here....</></LazyLoad>}}

import{LazyLoad}from'react-observer-api';exportdefault()=>{conststyle={padding:10};return{<LazyLoadas="span"style={style}forceVisible><>...Component goes here....</></LazyLoad>}}

For IE support, need to addpolyfill

You can import the polyfill directly or use a service like polyfill.io to add it when needed.

npm i intersection-observer

Then import it in your app:

import 'intersection-observer'

If you are using Webpack (or similar) you could use dynamic imports, to load the Polyfill only if needed. A basic implementation could look something like this:

    /**    * Do feature detection, to figure out which polyfills needs to be imported.    **/    async function loadPolyfills() {        if (typeof window.IntersectionObserver === 'undefined') {            await import('intersection-observer')        }    }

MIT