PACKAGES

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:

Terminal

bashnpm install @rasenganjs/image

Usage

Import the CSS file

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

main.ts

jsimport "@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.

Avatar.tsx

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

Avatar.tsx

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

tsximport Image from "@rasenganjs/image";

Props

Name	Type	Description
`src`	`string` \| `{ uri: string }`	Specifies the image source, either as a local path or a remote URL.
`alt`	`string`	Provides a short description of the image for accessibility.
`width`	`number`	Sets the width of the image in pixels.
`height`	`number`	Sets the height of the image in pixels.
`className`	`string`	Adds custom CSS classes for styling.
`style`	`object`	Allows inline styling using a JavaScript object.
`loading`	`'lazy'` \| `'eager'`	Determines how the image loads: `lazy` for deferred loading or `eager` for immediate loading.
`mode`	`'blur'` \| `'wave'`	Defines the loading animation style, applicable only when `loading` is set to `lazy`.
`objectFit`	`'contain'` \| `'cover'` \| `'fill'` \| `'inherit'` \| `'initial'` \| `'none'`	Controls how the image fits within its container.
`loadingOnViewport`	`boolean`	If `true`, the image loads only when it enters the viewport.
`fallbackSrc`	`string`	Specifies an alternative image to display if the main image fails to load.

Community

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