lazy-image-renderer v1.1.8

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

npm install lazy-image-renderer --save

or

yarn add lazy-image-renderer

Use

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

Examples

Default

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

Responsive image source

<LazyImageRenderer
  sizes='(max-width: 600px) 120px, (max-width: 900px) 193px, 278px'
  src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
  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'
/>

Effects

Blur

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

Black and white

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

Opacity

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

Effect Duration

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

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

Intersection Options

<LazyImageRenderer
  effect='opacity'
  objectFit='cover'
  src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
  intersectionOptions={{
    rootMargin: '100px',
    threshold: 0.15,
  }}
/>

Properties

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

Read more: #dom-intersectionobserver

interface IntersectionOptions {
  root?: Element | null;
  rootMargin?: string;
  threshold?: number | number[];
}

Live example

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

Author ✒️

• Jeison Nisperuza - jnisperuza - jnisperuza.github.io