Skip to content
This repository has been archived by the owner on Feb 15, 2022. It is now read-only.

Simple && small React.js component for lazy load your images (with ssr support)

License

Notifications You must be signed in to change notification settings

vadymshymko/react-lazilyload-img

Repository files navigation

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