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 (internally named LazyImage).

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.