🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The React Progressive Images With Lazy Loading component loads low resolution/ placeholder image first and then load the actual image lazily when it’s in the viewport.

Featured Image Loading React

Documentation

react-lazy-progressive-image

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


npm npm CircleCI



⚡️ Why?

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


⚡️ Installation

The package is available on npm.

npm i -s react-lazy-progressive-image

⚡️ 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

  • Unit tests
  • Integration tests
  • Suspense integration
  • More tests

🙏 Credits

  1. Formidable Labs
  2. Josh Johnston

You May Also Like