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

| prop | desc | | ---------------------------- | ------------------------------------------------------------------------------------------ | | imageSrc | src of the image, string | | classAdded | name of class added to the observed element once the image has loaded, default is loaded | | observerOptions | If you'd like to change any of the IntersectionObserver options, pass an object... |

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>