react-magic-image-loader

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.