Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ib-image-optimizer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Image Optimizer

A React component for optimizing images with loading states and aspect ratio control.

Features

🖼️ Image optimization with loading states
📐 Flexible aspect ratio control (auto, square, portrait, landscape)
💅 Customizable styling with Tailwind CSS
🌙 Dark mode support
🚀 Smooth fade-in transitions
🛡️ Error handling with fallback images
📱 Responsive design
⚡ TypeScript support
🧪 Test coverage with Jest and React Testing Library

Installation

npm install ib-image-optimizer

Usage

import { ImageOptimizer } from "ib-image-optimizer";

function App() {
  return (
    <ImageOptimizer
      src="https://example.com/image.jpg"
      alt="Description"
      aspectRatio="auto"
      className="rounded-lg shadow-lg"
      showSkeleton={true}
      fallbackSrc="https://example.com/fallback.jpg"
      onError={(error) => console.error(error)}
      onLoad={() => console.log("Image loaded")}
    />
  );
}

Props

Prop	Type	Default	Description
`src`	string	-	The source URL of the image
`alt`	string	-	Alt text for the image
`aspectRatio`	"auto" \| "square" \| "portrait" \| "landscape"	"auto"	The aspect ratio of the image
`className`	string	-	Additional CSS classes to apply
`style`	React.CSSProperties	-	Inline styles to apply
`showSkeleton`	boolean	true	Whether to show the loading skeleton
`fallbackSrc`	string	-	Fallback image URL if the main image fails to load
`onError`	(error: Error \| ErrorEvent) => void	-	Error handler callback
`onLoad`	() => void	-	Load handler callback

Aspect Ratios

The component supports multiple aspect ratios:

auto: Natural aspect ratio of the image
square: 1:1 aspect ratio
portrait: 3:4 aspect ratio
landscape: 4:3 aspect ratio

Styling

You can customize the appearance using:

className prop for Tailwind CSS classes
style prop for inline styles

Example:

<ImageOptimizer
  src="image.jpg"
  alt="Custom styled image"
  className="rounded-full border-4 border-blue-500"
  style={{ filter: "grayscale(50%)" }}
/>

Error Handling

The component provides robust error handling:

fallbackSrc prop for a backup image
onError callback for error handling
Automatic fallback to null if no fallback image is provided

Example:

<ImageOptimizer
  src="https://invalid-url.com/image.jpg"
  fallbackSrc="fallback.jpg"
  onError={(error) => console.error("Image failed to load:", error)}
/>

Development

Clone the repository
Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
Run tests:
```
npm test
```
Generate coverage report:
```
npm run test:coverage
```

Testing

The component includes comprehensive tests using Jest and React Testing Library. Key test cases include:

Loading states
Error handling
Aspect ratio changes
Fallback image behavior
Event handling

Run the test suite:

npm test

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.