React Progress Image

react-progress-image is an <img> tag replacement for react supporting displaying a loading spinner or bar in case the large image takes a lot of time to load. This library supports displaying custom loading bar or spinners.

Getting Started

To install this library use the npm install command:

npm install react-progress-image --save

Later import the ImageLoader component from it

import {ImageLoader} from "react-progress-image";

Dependencies

react-progress-image has no external dependencies, aside for a version of react and react-dom which support hooks and @babel/runtime.

Documentation

ImageLoader

| Props | Documentation | | :--------------: | :-----------------------------------------------------------------------------------------------------------------------------: | | onProgressUpdate | Callback for the event when image loading progress is change. This provides the percentage of image downloaded | | onDone | Callback for the event when image download is completed | | hideLoading | Boolean: to hide the default loading display of the component. This should to be true when custom loader is used. Default:false |

Example Usage:

This is the example of using custom loader. Replace the <h1> with your custom loader component

import React,{useState} from "react"
import {ImageLoader} from "react-progress-image";

const  ImageComponent=()=> {
  const url="test-url";
  const [state,setState]=useState({LoadingPercent:0})
  return (
    <div>
    {state.LoadingPercent<100 &&
    <h1>{`Loading ${state.LoadingPercent}%`} </h1>}
     <ImageLoader src={url} hideLoading onProgressUpdate={(progress)=>{
       setState({...state,LoadingPercent:progress})
     }}/>
    </div>
  );
}

export default ImageComponent;