Release v1.0.0

Release v1.0.0 - ZenUI Lazy Image React

We are excited to announce the release of version 1.0.0 of the ZenUI Lazy Image React package! This version includes various powerful features to enhance your web applications' performance and user experience by lazy loading images with customizable placeholders and effects.

Features

• Lazy Loading with Intersection Observer API: Efficiently lazy load images as they enter the viewport using the Intersection Observer API.
• Fallback to Scroll Event Listening: Provides a fallback mechanism to lazy load images using the scroll event if the Intersection Observer API is not supported.
• Customizable Placeholder: Easily customize the placeholder image to be displayed while the main image is loading.
• Built-in Placeholder Effects: Apply blur or opacity effects to the placeholder image for a smooth loading experience.
  • blur
  • opacity
  • none
• Custom Skeleton Support: Use custom skeleton components as placeholders to improve the visual experience during image loading.
• Offset Configuration for Pre-loading: Configure an offset in pixels to start loading the image before it enters the viewport for a smoother user experience.
• Image Optimization: Dynamically optimize image loading based on breakpoints to reduce loading times and improve performance.
• Responsive Images with Custom Breakpoints: Define custom breakpoints for responsive images, allowing different image sizes for different screen widths.

Installation

You can install the package using npm or yarn:

npm install zenui-lazy-image-react

Usage

Here's a basic usage example of the LazyLoadImage component:

import React from 'react';
import LazyLoadImage from 'zenui-lazy-image-react';

function App() {
  return (
    <LazyLoadImage
      src="your-image-url.jpg"
      placeholder="placeholder-image-url.jpg"
      alt="Description"
      placeholderEffect="blur"
      offset={100}
      optimize={true}
      breakpoints={{ small: 480, medium: 768, large: 1024 }}
    />
  );
}

export default App;

Props

Prop	Type	Default	Description
src	string	required	The source URL of the image
alt	string	''	Alt text for the image
placeholder	string	''	URL of the placeholder image
className	string	''	CSS class name
style	object	{}	Inline styles
placeholderEffect	'blur' | 'opacity' | 'none'	'none'	Effect to apply to placeholder
customSkeleton	element	null	Custom skeleton component
offset	number	0	Offset in pixels for pre-loading
useIntersectionObserver	boolean	true	Use Intersection Observer API
scroll	boolean	false	Use scroll event instead
onLoad	function	() => {}	Called when image loads
onError	function	() => {}	Called on load error
optimize	boolean	false	Optimize image loading based on breakpoints
breakpoints	object	{}	Custom breakpoints for responsive images

Example with All Props

import React from 'react';
import LazyLoadImage from 'zenui-lazy-image-react';

function App() {
  const handleImageLoad = () => {
    console.log('Image loaded');
  };

  const handleImageError = () => {
    console.log('Failed to load image');
  };

  return (
    <LazyLoadImage
      src="your-image-url.jpg"
      alt="Description"
      placeholder="placeholder-image-url.jpg"
      className="custom-class"
      style={{ borderRadius: '8px' }}
      placeholderEffect="blur"
      customSkeleton={<div className="skeleton-loader">Loading...</div>}
      offset={100}
      useIntersectionObserver={true}
      scroll={false}
      onLoad={handleImageLoad}
      onError={handleImageError}
      optimize={true}
      breakpoints={{ small: 480, medium: 768, large: 1024 }}
    />
  );
}

export default App;