Enhance your Next.js image handling with ease using the @sohanemon/next-image npm package. This package provides two powerful components, Placeholder and Img, designed to simplify and optimize image loading and rendering within your Next.js applications. 🚀

You can install the package using npm:

npm install @sohanemon/next-image

Or with Yarn:

yarn add @sohanemon/next-image

The Img component from '@sohanemon/next-image/dist/placeholder' directory takes care of loading and displaying images with placeholder support. It provides a smooth visual experience by showing a blurred placeholder image while the main image is loading. ⏳

import Img from '@sohanemon/next-image/dist/placeholder';

<Img src='/path/to/your/image.png' />;

Key features:

• Automatic generation of a base64-encoded blurred placeholder image.
• Seamless loading of remote (HTTP) and local images.
• Supports additional props from the Img component.

The Img component simplifies the integration of Next.js's Image component while allowing for easy customization. 🎨

import Img from '@sohanemon/next-image';

<Img src='/path/to/your/image.png' />;

The Img component also can inject svg directly to the dom.

import Img from '@sohanemon/next-image';

<Img inject src='/path/to/your/image.svg' />;

Key features:

• Intuitive handling of image rendering and aspect ratio.
• Inject svg element directly to the dom.
• Automatic optimization for various screen sizes using the sizes attribute.
• Use src prop as '/public/img.png', '/img.png' or 'https://hello.world/img.png'
• Customization of className, imageClassName, placeholderProps, and more.

Here's a quick guide on how to utilize the components in your Next.js project:

1. Import the desired component:

import Img from '@sohanemon/next-image';
import Placeholder from '@sohanemon/next-image/dist/placeholder';

2. Use the components within your JSX:

<Placeholder src="/path/to/your/image.png" alt="Description of the image" />

<Img src="/path/to/your/image.png" alt="Description of the image" />

import Img from '@sohanemon/next-image';
import Img from '@sohanemon/next-image/dist/placeholder';

// ...

<Placeholder src="/path/to/your/image.png" alt="Description of the image" />

// ...

<Img src="/path/to/your/image.png" alt="Description of the image" />

Contributions to the @sohanemon/next-image package are welcome! If you encounter any issues or have suggestions for improvements, feel free to open an issue or pull request on the GitHub repository.

This project is licensed under the MIT License.

Elevate your Next.js image handling to the next level with the @sohanemon/next-image package. Simplify your code and improve user experience by effortlessly integrating optimized images with placeholders. Happy coding! 🎉