react-lazy-progressive-image

Load low resolution/ placeholder image first and then load the actual image lazily when it's in the viewport.

:zap: Why?

Load low resolution/ placeholder image first and then load the actual image lazily when it's in the viewport.

:zap: Installation

The package is available on npm.

npm i -s react-lazy-progressive-image

:zap: Usage

Just like react-progressive-image this component expects exactly one child which has to be a function.

import React, { Component } from "react";
import LazyImage from "react-lazy-progressive-image";

class App extends Component {
  render() {
    return (
      <LazyImage
        placeholder={"http://example.com/placeholder.png"}
        src={"http://example.com/src.png"}
      >
        {(src, loading, isVisible) => <img src={src} />}
      </LazyImage>
    );
  }
}

The child which is a function will have access to src, loading and isVisible values as arguments and the user can decide how to use those values to render image styles. (This pattern is called render props or children props pattern)

| Render prop | Description | Type | Values | | --------------------- | ------------------------------------------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------- | | src | The src of the image being rendered | String | Initially points to the placeholder image, then loads image and will then point to the source image | | loading | Whether the image is currently being loaded | Boolean | true/false | | isVisible | Whether the image is currently visible in the page. This is managed by react-visibility-sensor | Boolean | true/false | | visibilitySensorProps | Props to pass to react-visibility-sensor . Handy for partialVisibility | Object | undefined or {} |

Example usage with styled-components

You can use styled-components, to transition an image from the placeholder when the image has loaded. You can use the render props as mentioned above and then use it to animate the opacity of the image from 0.2 to 1 when the image is loaded. This is , of course, a basic example. But you can use this logic to create more powerful animations.

For eg :

import React, { Component } from "react";
import styled from "styled-components";
import LazyImage from "react-lazy-progressive-image";

const Image = styled.img`
  height: 450px;
  width: 800px;
  margin-top: 200px;
  display: block;
  transition: all 0.25s ease;
  opacity: ${props => (props.loading ? 0.2 : 1)};
`;

class Usage extends Component {
  render() {
    return (
      <LazyImage
        src={"/assets/imageURL"}
        placeholder={"/assets/placeholderURL"}
      >
        {(src, loading) => <Image src={src} loading={loading} />}
      </LazyImage>
    );
  }
}

How was this package made 🔧

A good amount of code has been taken from react-progressive-image, the additions being the usage of react-visibility-sensor to check if there is a need to load the image and making sure that the image doesn't load in advance when it's not really needed.

✊ Improvements in the roadmap

• [x] Unit tests
• [x] Integration tests
• [ ] Suspense integration
• [ ] More tests

🙏 Credits

1. Formidable Labs
2. Josh Johnston