react-lazilyload-img

2.1.6 • Public • Published

react-lazilyload-img

npm version npm bundle size GitHub license

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

Table of contents

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

Package Sidebar

Install

npm i react-lazilyload-img

Weekly Downloads

90

Version

2.1.6

License

MIT

Unpacked Size

10.5 kB

Total Files

6

Last publish

Collaborators

  • vadymshymko