@lironefitoussi/react-skeleton-img-loader NPM

react-skeleton-img-loader by Lirone Fitoussi

A React hook for lazy loading images with an integrated Material-UI skeleton loader.

Installation

npm install react-skeleton-img-loader @mui/material

Ensure you have the peer dependencies installed:

npm install react @mui/material @emotion/react @emotion/styled

Usage

import React from 'react';
import useLazyImage from 'react-skeleton-img-loader';

const MyComponent = () => {
  const lazyImage = useLazyImage('https://example.com/image.jpg', {
    width: 300,
    height: 200,
    alt: 'Example image',
  });

  return (
    <div>
      <h1>My Lazy Loaded Image</h1>
      {lazyImage}
    </div>
  );
};

export default MyComponent;

API Reference

`useLazyImage(src, options)`

A hook that returns a React element containing a lazy-loaded image with a skeleton loader.

Parameters

src (string): The source URL of the image to be loaded.
options (object):
- width (number): The width of the image and skeleton.
- height (number): The height of the image and skeleton.
- alt (string, optional): The alt text for the image. Default: ''.
- ...imgProps (object, optional): Any additional props to be passed to the img element.

Returns

(React.ReactElement): A div containing both the skeleton and the image.

Examples

Basic Usage

const MyComponent = () => {
  const lazyImage = useLazyImage('https://example.com/image.jpg', {
    width: 300,
    height: 200,
    alt: 'A beautiful landscape',
  });

  return <div>{lazyImage}</div>;
};

With Additional Image Props

const MyComponent = () => {
  const lazyImage = useLazyImage('https://example.com/image.jpg', {
    width: 300,
    height: 200,
    alt: 'A beautiful landscape',
    className: 'my-image-class',
    style: { borderRadius: '8px' },
  });

  return <div>{lazyImage}</div>;
};

TypeScript Support

The useLazyImage hook includes TypeScript definitions. Here's an example of how to use it with TypeScript:

import React from 'react';
import useLazyImage from 'react-skeleton-img-loader';

interface MyComponentProps {
  imageSrc: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ imageSrc }) => {
  const lazyImage = useLazyImage(imageSrc, {
    width: 300,
    height: 200,
    alt: 'Example image',
  });

  return (
    <div>
      <h1>My Lazy Loaded Image</h1>
      {lazyImage}
    </div>
  );
};

export default MyComponent;