@codemantion/lazy-load-image NPM

About the project

A simple and lightweight React Component to lazy load images

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).

@infinitebrahmanuniverse/nolb-_codem @everything-registry/sub-chunk-184 @zalastax/nolb-_codem

0.1.0

2 years ago