react-image-progressive-loading v0.3.1

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

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