Lazy Load Image React

lazyLoad.jsx

import React, { useState, useEffect } from 'react'
import AspectRatio from 'react-aspect-ratio'
import handleViewport from 'react-in-viewport'
import BootstrapImage from 'react-bootstrap/Image'

// Utils
import { INIT, LOADING, LOADED } from '../../utils/constants'

// Scss
import './lazyImage.scss'

const ImageObject = (props) => {
  const {
    alt,
    className,
    forwardedRef,
    inViewport,
    ratio,
    fluid,
    src: originalSrc,
  } = props
  const [src, setSrc] = useState('')
  const [status, setStatus] = useState(INIT)
  const [datasrc, setDataSrc] = useState('')

  const loadImage = imageSrc => {
    const img = new Image()

    setStatus(LOADING)

    img.onload = () => {
      setSrc(imageSrc)
      setStatus(LOADED)
      setDataSrc('fade-in')
    }

    img.src = imageSrc
    img.alt = alt
  }

  useEffect(() => {
    if (inViewport && status === INIT) {
      loadImage(originalSrc)
    }
  }, [inViewport, status, loadImage, originalSrc])


  return (
    <AspectRatio
      ratio={ratio}
      ref={forwardedRef}
    >
      <BootstrapImage
        alt={alt}
        src={src}
        className={`${className} lazy-image`}
        fluid={fluid}
        datasrc={datasrc}
      />
    </AspectRatio>
  )
}

const LazyImage = handleViewport(ImageObject, {}, { disconnectOnLeave: true })
export default LazyImage