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
npm install @rasenganjs/image

Usage

Import the CSS file

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

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

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

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

NameTypeDescription
srcstring | { uri: string }Specifies the image source, either as a local path or a remote URL.
altstringProvides a short description of the image for accessibility.
widthnumberSets the width of the image in pixels.
heightnumberSets the height of the image in pixels.
classNamestringAdds custom CSS classes for styling.
styleobjectAllows 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.
loadingOnViewportbooleanIf true, the image loads only when it enters the viewport.
fallbackSrcstringSpecifies 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:

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

License

This package is MIT licensed.