A React component that optimizes image loading using Intersection Observer, providing smooth transitions and improved performance for lazy image rendering.
npm install lazy-image-rendererA React component that optimizes image loading using Intersection Observer, providing smooth transitions and improved performance for lazy image rendering.
Get started``bash`
npm install lazy-image-renderer --save
or
`bash`
yarn add lazy-image-renderer
`ts`
import { LazyImageRenderer } from 'lazy-image-renderer';
#### Default
`tsx`
#### Responsive image source
`tsx`
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'
/>
#### Blur
`tsx`
effectDuration={0.5}
objectFit='cover'
src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
/>
#### Black and white
`tsx`
objectFit='cover'
src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
/>
#### Opacity
`tsx`
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.
`tsx`
effectDuration={0.4}
objectFit='cover'
src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
/>
#### Intersection Options
`tsx`
objectFit='cover'
src='http://jnisperuza-images.infinityfreeapp.com/vangogh-lg.jpg'
intersectionOptions={{
rootMargin: '100px',
threshold: 0.15,
}}
/>
src is the only required property, all other properties are optional.
| Property | type | Description |
| ------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| name | string | Specifies a name for a wrapper component. |string
| className | | Specifies a custom class for a wrapper component, is possible to send multiple class separate with spaces ("foo baz"). |string
| alt | | Specifies an alternate text for an image. |anonymous
| crossorigin | , use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas. |string
| longdesc | | Specifies a URL to a detailed description of an image. |fill
| objectFit | , contain, cover, scale-down, none | Property is used to specify how an img or video should be resized to fit its container. |no-referrer
| referrerpolicy | , no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url | Specifies which referrer information to use when fetching an image. |boolean
| ismap | | When present, it specifies that the image is part of a server-side image map (an image map is an image with clickable areas). |string
| usemap | | Specifies an image as a client-side image map. |string
| src | | [required] Specifies the path to the image. |string
| sizes | | Specifies image sizes for different page layouts. |string[]
| srcSet | | Specifies a list of image files to use in different situations. |number
| height | , string | Specifies the height of an image, \*If it is not sent, the value of the parent is taken. |number
| width | , string | Specifies the width of an image, \*If it is not sent, the value of the parent is taken. |blur
| effect | , black-and-white, opacity | Specifies the transition of how the image appears. It has a time of 8 milliseconds. |number
| effectDuration | | 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. |boolean
| draggable | | 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
`ts``
interface IntersectionOptions {
root?: Element | null;
rootMargin?: string;
threshold?: number | number[];
}
- Jeison Nisperuza - jnisperuza - jnisperuza.github.io