react-blur-img v1.0.6

BlurImg Component

The BlurImg component is a React component that provides a blurred placeholder image until the main image finishes loading. It also supports an optional loading spinner for a better user experience.

Try the Demo

Features

• Lazy-loads images with a blurred placeholder.
• Displays a loading spinner while the image loads.
• Fully customizable via props for aspectRatio, objectFit, and objectPosition.
• Easy to use and integrate into any React project.

Installation

1. Download the package via NPM.

npm i react-blur-img

2. Import the component in your project

import { BlurImg } from "react-blur-img";

3. Usage

import { BlurImg } from "react-blur-img";
import { img } from "https://example.com/real-image.jpg";
import { placeHolder } from "https://example.com/placeholder.jpg";

function App() {
  return (
    <div>
      <BlurImg img={img} placeHolder={placeHolder} alt="Descriptive Alt Text" />
    </div>
  );
}

Props

Required props

Optional props

Spinner Props structure

CSS classes

Custom Spinner usage

import { BlurImg, SpinnerProps } from "react-blur-img";
import { img } from "https://example.com/real-image.jpg";
import { placeHolder } from "https://example.com/placeholder.jpg";

const spinner: SpinnerProps = {
  width: 40,
  height: 40,
  borderTop: "4px dashed red",
  color: "white",
  style: "dashed",
};

function App() {
  return (
    <div>
      <BlurImg
        img={img}
        placeHolder={placeHolder}
        alt="Descriptive Alt Text"
        spinner={spinner}
      />
    </div>
  );
}

Tip for Improving Placeholder Loading

To create a placeholder background similar to the original image, you can simply take the original image and resize it to a very small dimension, such as 20x20px or 30x30px. This way, the placeholder will visually resemble the final version, and its loading will be almost instantaneous due to the reduced size, providing a smoother user experience.