react-image-progressive-loading

React-image-progressive-loading is a tool that helps you include heavy images in your webpage and display them when visible in the window. the display is progressive.

When we create a website which will contains a lot of images (heavy images), the loading of the page will takes more time because, the browser might load all images which are present in the web page. That's why, this library is made up.

installation

npm install react-image-progressive-loading

or

npm i react-image-progressive-loading

usage

import React from 'react'
import {Image} from 'react-image-progressive-loading'

const image = require("path/to/image.png").default

const ProfilImage = () => {
  return (
    <Image image={image} />
  )
}

export default ProfilImage

Props

prop	Default value	required	Description
image	not defined	true	This prop takes as value the source of the image
alt	"loading"	false	It defines the description of the image when it's not loaded
className	image	false	It's used for styling the image on the web page
blur	false	false	This prop is used for difining the type of loading that we want. If it's false, the background of te image will be gray while loading. If it's equal to true the background will be gray and there will be a blur

The default value of the className prop is defined like follow

.image {
  width: 300px;
  height: 300px;
  margin: 10px;
}

you can provide another style. For exameple

.image-style {
  width: 100%;
  height: 100%;
  margin: 10px;
}

and call it like that:

// code here

const ProfilImage = () => {
  return (
    <Image image={image} alt="description" className="image-style" />
  )
}

// code here