Package Exports

@tjoskar/react-lazyload-img

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tjoskar/react-lazyload-img) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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'

class App extends Component {
  defaultImage = 'https://www.placecage.com/1000/1000'
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg'

  render() {
    return (
      <React.Fragment>
        { /* To use a 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} />
      </React.Fragment>
    )
  }
}

You can also pass options (root, rootMargin, threshold) to the IntersectionObserver constructor. See the documentation for IntersectionObserver for more info.

See: https://stackblitz.com/edit/react-lazy-load-image for examples

Props

Both LazyLoadImage and LazyLoadBackgroundImage have the same props:

  defaultImage: string // Path to the default image to show before the lazy loading
  image: string // Path to the image to be lazy loaded
  errorImage?: string // Path to an image to show if the loading of `image` fails, will use `defaultImage` if not set
  onLoaded?: () => void // Callback function after the image has been loaded
  options?: ObserverOptions
  style?: Object // Will be passed to the under lying div/img tag
  height: number | string // The height of the image (can be set to `auto`)
  width: 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