Skip to content

Latest commit

 

History

History
109 lines (67 loc) · 3.13 KB

README.md

File metadata and controls

109 lines (67 loc) · 3.13 KB
Raw

@sohanemon/next-image 🌟

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

Installation 🛠️

You can install the package using npm:

npm install @sohanemon/next-image

Or with Yarn:

yarn add @sohanemon/next-image

Components 🖼️

Placeholder 🌈

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.

Img 📷

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' />;

Img/SVG 📜

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.

Usage 🚀

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';
  1. 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" />

Example 🌟

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" />

Contribution 🤝

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.

License 📜

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! 🎉