Package detail

simple-react-image

MuhammadUmar0195MIT1.0.13

Simple React Image is tag of react to gracefully manage large and broken images

simple-react-image, react-image, react, typescript, img, loader, fallback, react image, image on error, error image, react image loader, react image fallback, image, react error image, react-error-image

readme

simple-react-image is a React component of <img> tag, to gracefully loading large images. Additionally it accepts two optional props, fallback and errorImage. Fallback will be displayed when image will be loading and errorImage will be displyed on any error happend while loading image

demo image

Install

npm install --save simple-react-image

or,

yarn add simple-react-image

Prop	type	desciption	required
`fallback`	string	loading image	`no`
`errorImage`	string	image on error	`no`
`onStateChange`	function	called on loading state change	`no`

all img tags props

Usage

import { Image as Img } from 'simple-react-image';

  <Img
    src={"https://images.pexels.com/photos/813011/pexels-photo-813011.jpeg"}
    />

  <Img
    src={"https://images.pexels.com/photos/813011/pexels-photo-813011.jpeg"}
    fallback="loading image url"
    errorImage='image displyed on error'
    onStateChange={(state)=>{
      console.log(state)
    }}
    />

Demo

Check Demo here