IB Image Optimizer

A React component for optimizing images with loading states and error handling.

Features

• Image loading states with skeleton placeholders
• Error handling with fallback images
• Aspect ratio control
• Next.js server component support
• TypeScript support

Installation

npm install ib-image-optimizer

Usage

Basic Usage

import { ImageOptimizer } from "ib-image-optimizer/use-react";

function App() {
  return (
    <ImageOptimizer
      src="https://example.com/image.jpg"
      fallbackSrc="https://example.com/fallback.jpg"
      aspectRatio="square"
      onLoad={() => console.log("Image loaded")}
      onError={(error) => console.error("Image failed to load:", error)}
    />
  );
}

Next.js Integration

The component is designed to work seamlessly with Next.js server components:

// app/page.tsx
import { ImageOptimizer } from "ib-image-optimizer/use-react";

export default function Page() {
  return (
    <ImageOptimizer
      src="/images/hero.jpg"
      fallbackSrc="/images/fallback.jpg"
      aspectRatio="landscape"
    />
  );
}

Props

Prop	Type	Description
src	string	The source URL of the image
fallbackSrc	string	Fallback image URL to display if the main image fails to load
aspectRatio	"auto" | "square" | "portrait" | "landscape"	Controls the aspect ratio of the image container
onLoad	() => void	Callback fired when the image loads successfully
onError	(error: Error | ErrorEvent) => void	Callback fired when the image fails to load
className	string	Additional CSS classes to apply to the container
style	React.CSSProperties	Inline styles to apply to the container
showSkeleton	boolean	Whether to show a skeleton loading state (default: true)

Requirements

• React 18.2.0 or higher
• Next.js 14.0.0 or higher (for server component support)
• TypeScript 4.9.0 or higher (recommended)

License

MIT

Contributing

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