Image Loader
An advanced image loading component with beautiful loading states, error handling, and performance optimizations.
Installation
Install the Image Loader component using your preferred package manager.
Usage
The Image Loader component provides a seamless image loading experience with animated patterns, smooth transitions, and comprehensive error handling.
Discover Its Features
The Image Loader component is packed with powerful features designed to provide an exceptional user experience.
Beautiful Loading States
Dynamic SVG patterns with gradient effects provide visually appealing loading experiences.
Optimized Performance
Lazy loading, async decoding, and efficient pattern generation for optimal performance.
Responsive Design
Automatically adapts to different screen sizes and container dimensions.
Error Handling
Graceful fallback states with customizable error components for failed image loads.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | undefined | The source URL of the image to load |
| alt | string | undefined | Alternative text for the image (required for accessibility) |
| className | string | '' | Additional class names for styling |
| blurIntensity | string | 'blur(50px)' | CSS blur filter intensity for the loading state |
| width | number | string | 400 | Width of the image container in pixels or CSS units |
| height | number | string | 300 | Height of the image container in pixels or CSS units |
| fallbackComponent | React.ReactNode | undefined | Custom component to display when image fails to load |
| onLoad | () => void | undefined | Callback function called when image successfully loads |
| onError | (error: Event) => void | undefined | Callback function called when image fails to load |
| loading | 'lazy' | 'eager' | 'lazy' | Native browser loading behavior for the image |
| objectFit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' | 'cover' | How the image should be resized to fit its container |
| customColors | ColorCombination[] | undefined | Custom color combinations for the loading pattern |
| seed | number | undefined | Seed value for generating consistent loading patterns |