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.

| 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

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