Img Loading

React Package Which Display Loader until Image Loaded Successfully, And Allow Developers To Show Error Image When Target Image Load Failed.

Table of Contents

• About The Project
• Built With
• Installation
• Usage
• Contact

About The Project

Package Provide A Loading Component To View While Image Loading And View Another Image If Loading Error

Built With

ReactJs

Getting Started

Installation

npm install img-loading --save

Usage

import React, { Component } from 'react'
import ImageLoader from "img-loading"
class App extends Component {
  
     render() {
      return(
        <ImageLoader 
            imageSrc={"https://example.com/image_1"}
            errorImageSrc={"https://example.com/image_1"}  
            loader={LoaderComponent}
            alt={"acount image"}
          />
      )
     }
}
export default App

Props

Prop Name	Description	Type
imageSrc	scr Attribute For Image To Load	string
errorImageSrc	scr Attribute For Image To Load When Main Image Cause Error	string
loader	Loader Component to Display While Image Loading	Component
alt	alt Attribute For Image	string

Customize Style

.image-container{  /* Root Element */  }
 
.image-container img{  /* Your Image Element */  }

.image-container .image-container-overlay{ /* Loader Overlay Element */   }

Contact