next-image-aspect-ratio
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

next-image-aspect-ratio License npm version

next-image-aspect-ratio is a React component designed to work within Next.js projects to provide an easy and effective way to manage image aspect ratios. This component automatically calculates the aspect ratio based on the provided width and height and ensures the image fills its container without distortion.

Features

  • Easy Integration: Seamlessly integrates with Next.js projects.
  • Responsive Design Support: Maintains the aspect ratio of images to ensure they adapt to different device screens without distortion.
  • Full Compatibility: Accepts all image properties available in Next.js's Image component.
  • Customizable Width: Allows customization of the maximum width through a simple prop.

Installation

To install the package, you can use npm or Yarn. Run one of the following commands in the root directory of your Next.js project:

npm install next-image-aspect-ratio

Or

yarn add next-image-aspect-ratio

Usage

Here's a complete example of how to use the NextImageAspectRatio component within a functional React component in a Next.js project:

import React from "react";
import NextImageAspectRatio from "next-image-aspect-ratio";

function ImageDisplayComponent() {
  return (
    <NextImageAspectRatio
      src="/path/to/image.jpg"
      width={1920}
      height={1080}
      alt="Descriptive alt text for accessibility"
    />
  );
}

export default ImageDisplayComponent;

Props

Here are the props you can pass to NextImageAspectRatio:

Property Type Required Default Description
src string Yes None URL of the image.
width string | number Yes None The original width of the image.
height string | number Yes None The original height of the image.
alt string Yes None Descriptive text for the image, crucial for accessibility.
maxWidth string No "100%" The maximum width of the image container.

Additionally, NextImageAspectRatio supports all the properties that are available to the Next.js Image component, allowing you to use optional properties such as priority, placeholder, blurDataURL, and more for enhanced image handling and performance.

Readme

Keywords

none

Package Sidebar

Install

npm i next-image-aspect-ratio

Weekly Downloads

0

Version

1.0.5

License

none

Unpacked Size

8.25 kB

Total Files

5

Last publish

Collaborators

  • solaimanshadin