React Lazy Load Image

An simple React Component to lazy load image
Install · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Installation
3. LazyImage Usage
4. Props
5. Global override

About the project

A simple and lightweight React Component to lazy load images

(back to top)

Installation

Installalation

• npm

  npm install @codemantion/lazy-load-image

• yarn

  yarn add @codemantion/lazy-load-image

LazyImage Usage

import React from 'react';
import LazyImage from '@codemantion/lazy-load-image';

const MyComponent = () => (
<React.Fragment>
  <LazyImage
    alt={'my-logo'}
    height={400}
    src={LOGO} // You can import a logo or use an url
    width={400} 
  />
</React.Fragment>
);

Props

Prop	Type	Required	Default	Description
src	string	true		The image source. It can either pass a base64 object or URl can directly be used.
width	number		200	Image Default width. You can pass a number (i.e. 200) or a string (i.e. '200px').
height	number		200	Image Default height. You can pass a number (i.e. 200) or a string (i.e. '200px').
alt	string		'N/A'	Alternative text if the image doesn't render.
style	object		{ }	Element Inline Style. You can simply pass the css attribute inside the style attribute.

Global override

You can pass parameters to apply on all the LazyImage components globally.

import { overRideConfig } from '@codemantion/lazy-load-image';

To enable Server side rendering

overRideConfig({ ssr: true });

Global override Props

Prop	Type	Required	Default	Description
ssr	boolean		false	This will enable server side rendering(SSR).