Image Loader

A simple React component for magic image loading with cool animation effects. Easily load images with additional style options.

Features

• Customizable image styles (size, dimensions, etc.)
• 2 types
• Simple and easy to integrate

Installation

To install this package, use npm:

npm install react-magic-image-loader

Usage

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import MagicLoader from "react-magic-image-loader";

function App() {
  return (
    <div className="App">
      <MagicLoader
        src={logo} // The source of the image
        alt="logo" // Alt text for the image
        stl={{ width: "100px", height: "100px" }} // Custom inline styles
        type="magic" // Loader type
      />
    </div>
  );
}

export default App;

Props

| Prop Name | Type | Default | Required | Description | | --------- | ------ | ---------- | -------- | ------------------------------------------------------------- | | src | string | N/A | ✅ | The source URL or path of the image. | | alt | string | '' | ❌ | Alternate text for the image (useful for accessibility). | | stl | object | {} | ❌ | Inline styles to apply to the image (e.g., width, height). | | type | string | magic | ✅ | Animation type for the image (e.g., "magic", "skeleton"). | | onClick | func | () => {} | ❌ | Callback function when the image is clicked. |