react-responsive-image-loader v1.0.0

Responsive Image Loader

Responsive Image Loader is a lightweight React component written in TypeScript that dynamically loads the most appropriate image size based on the screen resolution. This enhances performance and user experience by ensuring that devices load images tailored to their display capabilities.

Features

• Responsive Loading: Serve images optimized for various screen sizes and resolutions.
• Lazy Loading: Defer loading of off-screen images to improve initial load times.
• WebP Support: Utilize modern image formats like WebP for browsers that support them, with fallbacks for others.

Installation

Install the package using npm:

npm install responsive-image-loader

Or with yarn:

yarn add responsive-image-loader

Usage

In a React Application

Import the component:

import React from 'react';
import ResponsiveImage from 'responsive-image-loader';

const App: React.FC = () => {
  const images = [
    { src: 'image-small.jpg', media: '(max-width: 600px)', type: 'image/jpeg' },
    { src: 'image-medium.jpg', media: '(max-width: 1200px)', type: 'image/jpeg' },
    { src: 'image-large.jpg', media: '(min-width: 1201px)', type: 'image/jpeg' },
    { src: 'image.webp', type: 'image/webp' }, // WebP format for browsers that support it
  ];

  return (
    <div>
      <h1>Responsive Image Loader</h1>
      <ResponsiveImage srcSet={images} alt="A responsive image" />
    </div>
  );
};

export default App;

Props

• srcSet (required): An array of objects, each containing:
• src: The image source URL.
• media (optional): A media query string that defines when this source is applicable.
• type (optional): The MIME type of the image (e.g., image/jpeg, image/webp).
• alt (required): Alternative text for the image.
• loading (optional): Specifies lazy loading behavior; accepts lazy or eager. Defaults to lazy.
• className (optional): CSS class names for styling the image.

Development

To contribute or modify the component, follow these steps:

Clone the repository:

git clone https://github.com/yourusername/responsive-image-loader.git

cd responsive-image-loader

Install dependencies:

npm install

Build the project:

npm run build

Run the development server:

npm start

License

This project is licensed under the MIT License.