react-lazy-imager

The imager is used to replace tag, and it will lazy to load the picture.

Usage no npm install needed!

<script type="module">
  import reactLazyImager from 'https://cdn.skypack.dev/react-lazy-imager';
</script>

README

React-Imager

The imager is used to replace tag, and it will lazy to load the picture.

Installation and usage

Install

npm install -S react-imager

Then use it in your app:

import React from 'react';
import Img from 'react-imager';

class App extends React.Component {

  successCallback(){

  }

  render() {
    return (
      <Img 
        src="./expamle.png" 
        thumbSrc="./thumb.png" 
        className="demo"/>
        onSuccess={this.successCallback}
    );
  }
}

Props

It has all the attributes of the <img> tag, such as:

  • src
  • style
  • className
  • alt
  • thumbSrc: display before the src is loaded
  • errorSrc: display while load src failed
  • onSuccess: callback after the image is successfully loaded
  • onFailed: callback after the image is failed loaded

License

MIT License

Keywords

react image lazyload img