React Image Loader Component

The React Image Loader Component is a versatile and customizable image loading component for React applications. It provides an elegant way to handle image loading states, such as showing placeholders or loading spinners while the image is being fetched from a server.

Key Features

• Easy integration: Simply import the component and use it in your React application.
• Loading state management: loading spinners while images are being loaded.
• Customizable styling: Easily customize the appearance of the image loader component to match your application's design.

Installation

You can install the React Image Loader Component using npm:

npm install react-lazy-load-img-component

Usage

• You will need twi images original image and small image as a placeholder. For better performance the small image should be less than 4kb
• Import the component and use it in your React application like this:

1import React from "react"
2import ImageComponent from "react-lazy-load-img-component"
3
4const App = () => {
5  return (
6    <>
7      <ImageComponent
8        src={img1}
9        placeholderSrc={img1Small}
10        imageClass="img"
11        loader="spinner"
12        alt="a topical beach with a lot of palm trees with beautiful sea water"
13      />
14      <ImageComponent
15        src={img2}
16        placeholderSrc={img2Small}
17        imageClass="img"
18        loader="pulse"
19        alt="a pinkish water with a big beautiful boulder in the middle that has a few small trees on the top of it"
20      />
21    </>
22  )
23}
24
25export default App

Props

The React Image Loader Component accepts the following props:

• src (string, required): The source URL of the image to be loaded.
• placeholderSrc (string, required): The placeholder small image to be displayed while the image is loading.
• className (string): custom class for the image wrapper.
• imageClass (string): custom class for the image.
• loader (string): choose loader style choose: spinner, pulse, or leave it empty.