Rasengan Image

An utility component for handling images in Rasengan.js, offering lazy loading with a smooth preview animation to enhance user experience.

By default, images load only when they appear in the viewport, and a preview animation is shown while the image is loading. You can customize this behavior as needed.

Installation

By default, when using the create-rasengan CLI to create a new project, the @rasenganjs/image package is already installed.

If not, you can install it by running the following command:

npm install @rasenganjs/image

Usage

Import the CSS file

Before using the Image component, import the necessary styles in your main.ts file:

import "@rasenganjs/image/css";

Displaying Images

Local Image

The package supports local images. You can import an image and pass it as the src prop. Supported file extensions: .jpg, .jpeg, .png, .gif, .webp, .svg.

import React from "react";
import Image from "@rasenganjs/image";
import avatar from "@assets/images/avatar.jpg";
 
export default function Avatar() {
  return <Image src={avatar} alt="Avatar" width={100} height={100} />;
}

External Image

You can also use external images by passing an object with a uri property as the src prop.

import React from "react";
import Image from "@rasenganjs/image";
 
export default function Avatar() {
  return (
    <Image
      src={{ uri: "https://example.com/avatar.jpg" }}
      alt="Avatar"
      width={200}
      height={200}
    />
  );
}

API

Image

The Image component is exported by default from the @rasenganjs/image package.

import Image from "@rasenganjs/image";

Props

Community

Join the Rasengan.js community to get support, ask questions, and share your projects:

• GitHub Discussions – Ask questions and share ideas.

• X (Twitter) – Stay updated with the latest news.
• Linkedin – Follow the company page.

Let's build something amazing with Rasengan.js! 🚀

License

This package is MIT licensed.