react-lazy-load-image-observer

The LazyLoadImage component allows you to lazy load images, or background-images, and set the observed element.

The name is long (react-lazy-load-image-observer) bc npm made me do it.

Install

yarn add react-lazy-load-image-observer

or

npm install react-lazy-load-image-observer

Import

import LazyLoadImage from 'react-lazy-load-image-observer'

About

The wrapperRef declares the element you want to observer to trigger the image loading.

Use imageRef if you want to load an image to an <img> element.

Use backgroundRef if you want to load an image to an element's background-image.

If you omit wrapperRef, the observed elem will be imageRef. You can omit backgroundRef as well.

Props

observerOptions={{
  rootMargin: '-10% 0% 0% 0%',
  root: null,
  threshold: 0
}}

In order to animate, you'll have to add css in in regards to the .loaded class.

Something like

opacity: 0;
transition: opacity 400ms ease-in-out;
 
&.loaded {
  opacity: 1;
}

OR if using a wrapperRef, then

opacity: 0;
transition: opacity 400ms ease-in-out;
 
& .loaded {
  opacity: 1;
}

^^ notice the space in & .loaded, versus &.loaded

Examples

<LazyLoadImage imageSrc={src}>
  {({ wrapperRef, imageRef, backgroundRef }) => (
    <span ref={wrapperRef}>
      <img ref={imageRef} />
      <span ref={backgroundRef} />
    </span>
  )}
</LazyLoadImage>

<LazyLoadImage imageSrc={src}>{({ imageRef }) => <img ref={imageRef} />}</LazyLoadImage>

<LazyLoadImage imageSrc={src}>
  {({ backgroundRef }) => (
    <div>
      <div ref={backgroundRef} />
    </div>
  )}
</LazyLoadImage>