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