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: number | string

The height of the image (can be set to auto)

width

Type: number | string

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