1. Install

  npm i image-lazy-component

2. Use in react or nextjs :

import React from "react";
import { ImageLazy } from "image-lazy-component"

const YourComponent = () => {
  return (
    <ImageLazy
      alt="Alt text for the image"
      onClick={() => console.log("Image clicked")}
      style={{ width: "200px", height: "auto" }}
      height={200}
      onKeyPress={() => console.log("Key pressed")}
      onKeyDown={() => console.log("Key down")}
      id="your-image-id"
      crossOrigin="anonymous"
      loading="lazy"
      imgUrl="https://example.com/your-image.jpg"
      width={300}
      imgUrlDefault="https://placehold.co/280x200"
      className="custom-image-class"
      isLoading={false}
    />
  );
};

export default YourComponent;

alt: Placeholder text displayed when the image fails to load.

radiusBorder: The border radius of the image.

onClick: Event handler function triggered when clicking on the image.

style: Inline CSS for the image.

height: Height of the image.

onKeyPress: Event handler function triggered when a key is pressed while the image is focused.

onKeyDown: Event handler function triggered when a key is pressed while the image is focused.

id: ID of the image.

crossOrigin: Cross-origin attribute of the image.

loading: Loading mode of the image (lazy or eager).

imgUrl: URL of the image.

imgUrlDefault URL default when image broken or not working,You should set image from placeholder

width: Width of the image.

className: Custom CSS class of the image.

isLoading: Loading state of the image.

referrerPolicy: attribute specifies which referrer information to use when fetching the resource.

Copyright 2024 mia nguyen x thind9xdev

Licensed under the MIT License