react-lazilyload-img

react-lazilyload-img

Simple && small React.js component for lazy load images

Table of contents

• Installation
• Usage
• Props
• Demo

Installation

npm

npm install react-lazilyload-img --save

yarn

yarn add react-lazilyload-img

Usage

Basic Example:

import React, { Component } from 'react';
import Img from 'react-lazilyload-img';

const App = () => {
  return(
    <Img
      src="//images.unsplash.com/photo-1539250632877-c12b7d5d6fcb"
      placeholderSrc="//images.unsplash.com/photo-1539250632877-c12b7d5d6fcb?w=27&q=8"
    >
  );
};

Props

Name	Type	Default Value	Description
className	string	''	image className
loadingClassName	string	''	className for main image in loading state (applied when main image start loading and delete after loading end)
mainImgClassName	string	''	className for main image (applied when main image start loading)
mainImgOnLoad	func	null	function that will be called after main image load end
onLoad	func	null	function that will be called after placeholder image or main image load end
placeholderClassName	string	''	placeholder image className (deleted before main image start loading)
placeholderOnLoad	func	null	function that will be called after placeholder image load end
placeholderSrc	string	''	placeholder image src attr value
placeholderSrcSet	string	''	placeholder image srcset attr value
src	string	''	main image src attr value
srcSet	string	''	main image srcset attr value
...			any other image attributes

Demo