react-lazyload-img 
Lazy image loader for react
Install
$ npm install @tjoskar/react-lazyload-img
Usage
import React, { Component } from 'react'
import { LazyLoadImage, LazyLoadBackgroundImage } from '@tjoskar/react-lazyload-img'
const App = () => {
const defaultImage = 'https://www.placecage.com/1000/1000'
const image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg'
return (
<>
{ /* To use an img-tag */ }
<LazyLoadImage width={50} height="200px" defaultImage={this.defaultImage} image={this.image} />
{ /* To use a div-tag with background image styling */ }
<LazyLoadBackgroundImage width="100%" height="200px" defaultImage={this.defaultImage} image={this.image} />
</>
)
}You can also pass options (root, rootMargin, threshold) to the IntersectionObserver constructor. See the documentation for IntersectionObserver for more info. Eg.
<LazyLoadImage options={{ root: window }} height="200px" defaultImage={this.defaultImage} image={this.image} />See: https://stackblitz.com/edit/react-lazy-load-image for examples
Props
Both LazyLoadImage and LazyLoadBackgroundImage have the same props:
defaultImage
Type: string
Path to the default image (placeholder) to show before the lazy loading
image
Type: string
Default: 60
Path to the image to be lazy loaded
errorImage?
Type: string
Path to an image to show if the loading of image fails, will use defaultImage if not set
onLoaded?
Type: () => void
Callback function after the image has been loaded
options?
Type: ObserverOptions
IntersectionObserver options. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
style?
Type: React.CSSProperties
Will be passed to the underlying div/img tag
height
Type: () => void
The height of the image (can be set to auto)
width
Type: () => void
The width of the image (can be set to auto)
Requirement
The browser you are targeting needs to have support for IntersectionObserver and WeakMap or you need to import polyfill for them. You also need to use a bundler that understand es-modules (eg. webpack, rollup, parcel, fusebox, etc.)
License
MIT