1.0.6 • Published 1 year ago

react-magic-image-loader

Licence

MIT

Version

1.0.6

Deps

Size

7 kB

Vulns

Weekly

Summary Dependency Versions

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

Keywords

"image-loader""loader""skeleton-loader""image-skeleton-loader""magic-loader""colorful-loader""react""library"