lazy-image-renderer 🎨

Description

A React component that optimizes image loading using Intersection Observer, providing smooth transitions and improved performance for lazy image rendering.

Get started

1npm install lazy-image-renderer --save

or

1yarn add lazy-image-renderer

Use

1import { LazyImageRenderer } from 'lazy-image-renderer';

Examples

Default

1<LazyImageRenderer src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg' />

Responsive image source

1<LazyImageRenderer
2  sizes='(max-width: 600px) 120px, (max-width: 900px) 193px, 278px'
3  src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
4  srcSet='http://jnisperuza-images.infinityfreeapp.com/vangogh-sm.jpg 120w, http://jnisperuza-images.infinityfreeapp.com/vangogh.jpg 193w, http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg 278w'
5/>

Effects

Blur

1<LazyImageRenderer
2  effect='blur'
3  effectDuration={0.5}
4  objectFit='cover'
5  src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
6/>

Black and white

1<LazyImageRenderer
2  effect='black-and-white'
3  objectFit='cover'
4  src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
5/>

Opacity

1<LazyImageRenderer
2  effect='opacity'
3  objectFit='cover'
4  src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
5/>

Effect Duration

The duration will be read in seconds from a number, for instance: 1 = 1 second, 0.5 = 500 milliseconds.

1<LazyImageRenderer
2  effect='opacity'
3  effectDuration={0.4}
4  objectFit='cover'
5  src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
6/>

Intersection Options

1<LazyImageRenderer
2  effect='opacity'
3  objectFit='cover'
4  src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
5  intersectionOptions={{
6    rootMargin: '100px',
7    threshold: 0.15,
8  }}
9/>

Properties

src is the only required property, all other properties are optional.

Property	type	Description
name	string	Specifies a name for a wrapper component.
className	string	Specifies a custom class for a wrapper component, is possible to send multiple class separate with spaces ("foo baz").
alt	string	Specifies an alternate text for an image.
crossorigin	anonymous, use-credentials	Allow images from third-party sites that allow cross-origin access to be used with canvas.
longdesc	string	Specifies a URL to a detailed description of an image.
objectFit	fill, contain, cover, scale-down, none	Property is used to specify how an img or video should be resized to fit its container.
referrerpolicy	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url	Specifies which referrer information to use when fetching an image.
ismap	boolean	When present, it specifies that the image is part of a server-side image map (an image map is an image with clickable areas).
usemap	string	Specifies an image as a client-side image map.
src	string	[required] Specifies the path to the image.
sizes	string	Specifies image sizes for different page layouts.
srcSet	string[]	Specifies a list of image files to use in different situations.
height	number, string	Specifies the height of an image, *If it is not sent, the value of the parent is taken.
width	number, string	Specifies the width of an image, *If it is not sent, the value of the parent is taken.
effect	blur, black-and-white, opacity	Specifies the transition of how the image appears. It has a time of 8 milliseconds.
effectDuration	number	Specifies the transition time (expressed in seconds) of the image appearance.
intersectionOptions	IntersectionOptions	The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
draggable	boolean	When set to true, the draggable attribute allows users to click and drag the associated element using their mouse or touch input, providing an interactive and user-friendly interface for elements.

Read more: #dom-intersectionobserver

1interface IntersectionOptions {
2  root?: Element | null;
3  rootMargin?: string;
4  threshold?: number | number[];
5}

Live example

https://stackblitz.com/edit/lazy-image-renderer?file=App.tsx

Author ✒️

• Jeison Nisperuza - jnisperuza - jnisperuza.github.io