Rasengan Image

An utility component for Image which offers a lazy loading behavior with a previewing animation for enhancing UX

Images are loading when they are in the viewport by default, and a previewing animation is displayed while the image is loading. But you can change that behavior as you want.

Installation

You can install the @rasenganjs/image package using the following command:

npm install @rasenganjs/image

or

yarn add @rasenganjs/image

Usage

Here is an example of how you can use the @rasenganjs/image package:

Basic Usage

import Image from '@rasenganjs/image';
import logo from './logo.svg';

const App = () => {
  return (
    <Image
      src={logo}
      alt="Image"
      width={400}
      height={300}
    />
  );
};

With URI

import Image from '@rasenganjs/image';

const App = () => {
  return (
    <Image
      src={{ uri: "https://example.com/image.jpg" }}
      alt="Image"
      width={400}
      height={300}
    />
  );
};

Learn more on the Documentation website.

Community

The Rasengan.js community can be found on GitHub Discussions where you can ask questions, voice ideas, and share your projects with other people.

We also have a Twitter account where you can follow us to get the latest news about Rasengan.js.

License

Rasengan.js is MIT licensed.

Authors

Here is the authors list:

• Dilane Kombou (@dilanekombou)