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.                  |