{"id":24290993,"url":"https://github.com/zenui-labs/zenui-image-react","last_synced_at":"2026-03-03T19:03:06.801Z","repository":{"id":272924261,"uuid":"917803620","full_name":"zenui-labs/zenui-image-react","owner":"zenui-labs","description":"Render responsive images with lazy loading and optimized performance using customizable placeholders and skeletons.","archived":false,"fork":false,"pushed_at":"2025-01-17T13:31:23.000Z","size":123,"stargazers_count":35,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-09T23:48:55.086Z","etag":null,"topics":["lazy-image","lazy-loading","lazy-loading-components","loading","npm","npm-package","optimize-image","placeholder","react"],"latest_commit_sha":null,"homepage":"https://zenui.net/zenui-image-react-playground","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zenui-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-16T17:15:02.000Z","updated_at":"2025-09-03T16:52:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"3cf6b380-facd-4a5e-9e30-124838ad5a16","html_url":"https://github.com/zenui-labs/zenui-image-react","commit_stats":null,"previous_names":["asfak00/zenui-image-react","asfak00/zenui-lazy-image-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zenui-labs/zenui-image-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenui-labs%2Fzenui-image-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenui-labs%2Fzenui-image-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenui-labs%2Fzenui-image-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenui-labs%2Fzenui-image-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zenui-labs","download_url":"https://codeload.github.com/zenui-labs/zenui-image-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zenui-labs%2Fzenui-image-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276940206,"owners_count":25732264,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-25T02:00:09.612Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lazy-image","lazy-loading","lazy-loading-components","loading","npm","npm-package","optimize-image","placeholder","react"],"created_at":"2025-01-16T13:53:32.667Z","updated_at":"2025-09-25T15:32:00.540Z","avatar_url":"https://github.com/zenui-labs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ZenUI Image React\n\nA highly customizable, performance-focused React component for lazy loading images with advanced features like placeholder effects, image optimization, and responsive loading.\n\n![cover image](https://i.ibb.co.com/68GH4C4/package-cover.png \"cover image\")\n\n### Try it with our [Playground](https://zenui.net/zenui-image-react-playground)\n\n## Features\n\n- 🎯 **Lazy Loading**: Load images only when they enter the viewport\n- 🖼 **Placeholder Support**: Multiple placeholder types while images load\n- 🎨 **Effect Transitions**: Smooth transitions with blur, opacity, or color effects\n- 📱 **Responsive Images**: Automatic srcset and sizes generation\n- ⚡ **Performance Optimized**: Intersection Observer for efficient lazy loading\n- 🛠 **Highly Customizable**: Extensive props for fine-tuning behavior\n- 📦 **Lightweight**: Small bundle size.\n\n---\n\nIf our GitHub repository reaches 200 stars ⭐, we will proudly launch the Vue version of this package.\n\n[**Star the Repository on GitHub**](https://github.com/Asfak00/zenui-image-react)\n\n## Installation\n\n```bash\nnpm install zenui-image-react\n```\n\n## Basic Usage\n\n```jsx\nimport { LazyLoadImage } from 'zenui-image-react';\n\nfunction MyComponent() {\n  return (\n    \u003cLazyLoadImage\n      src=\"https://example.com/image.jpg\"\n      alt=\"Example\"\n      placeholderType=\"effect\"\n      effectType=\"blur\"\n    /\u003e\n  );\n}\n```\n\n## Advanced Features\n\n### 1. Placeholder Types\n\nChoose from multiple placeholder types while your image loads:\n\n```jsx\n// Effect Placeholder (blur, opacity, or color)\n\u003cLazyLoadImage\n  src=\"image.jpg\"\n  placeholderType=\"effect\"\n  effectType=\"blur\"\n  effectAmount={10}\n/\u003e\n\n// Custom Image Placeholder\n\u003cLazyLoadImage\n  src=\"image.jpg\"\n  placeholderType=\"image\"\n  placeholderImage=\"placeholder.jpg\"\n/\u003e\n\n// Custom Component Placeholder\n\u003cLazyLoadImage\n  src=\"image.jpg\"\n  placeholderType=\"custom\"\n  customPlaceholder={\u003cMyCustomLoader /\u003e}\n/\u003e\n```\n\n### 2. Image Optimization\n\nEnable automatic responsive image optimization:\n\n```jsx\n\u003cLazyLoadImage\n  src=\"image.jpg\"\n  optimize\n  quality={80}\n  breakpoints={{\n    sm: 576,\n    md: 768,\n    lg: 992,\n    xl: 1200\n  }}\n  imageWidths={{\n    sm: [576],\n    md: [768],\n    lg: [992],\n    xl: [1200]\n  }}\n/\u003e\n```\n\n### 3. Custom Loading Behavior\n\nControl the intersection observer and loading offset:\n\n```jsx\n\u003cLazyLoadImage\n  src=\"image.jpg\"\n  useIntersectionObserver={true}\n  offset={200} // Start loading 200px before entering viewport\n  onLoad={() =\u003e console.log('Image loaded')}\n  onError={(e) =\u003e console.error('Load failed:', e)}\n/\u003e\n```\n\n## API Reference\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `src` | string | Required | Image source URL |\n| `alt` | string | `''` | Alt text for the image |\n| `className` | string | `''` | CSS class name |\n| `style` | object | `{}` | Inline styles |\n| `placeholderType` | enum | `'none'` | Type of placeholder (`'none'`, `'effect'`, `'image'`, `'custom'`) |\n| `effectType` | enum | `'blur'` | Effect type (`'blur'`, `'opacity'`, `'color'`) |\n| `effectAmount` | number | `10` | Intensity of the effect |\n| `placeholderImage` | string | - | URL for placeholder image |\n| `customPlaceholder` | element | - | Custom React component as placeholder |\n| `optimize` | boolean | `false` | Enable responsive image optimization |\n| `quality` | number | `80` | Image quality (1-100) when optimize is true |\n| `breakpoints` | object | - | Custom breakpoints for responsive loading |\n| `imageWidths` | object | - | Width configurations for each breakpoint |\n| `sizes` | string | - | Custom sizes attribute for responsive images |\n| `useIntersectionObserver` | boolean | `true` | Enable/disable intersection observer |\n| `offset` | number | `0` | Loading offset in pixels |\n| `onLoad` | function | - | Callback when image loads |\n| `onError` | function | - | Callback when image fails to load |\n\n### Default Breakpoints\n\n```javascript\n{\n  xs: 320,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1400\n}\n```\n\n### Default Image Widths\n\n```javascript\n{\n  xs: [320],\n  sm: [576],\n  md: [768],\n  lg: [992],\n  xl: [1200],\n  xxl: [1400]\n}\n```\n\n## Performance Tips\n\n1. **Use WebP Format**: Provide WebP images when possible for better compression\n2. **Optimize Image Dimensions**: Use appropriate image sizes for different breakpoints\n3. **Enable Optimization**: Use the `optimize` prop for automatic responsive handling\n4. **Adjust Loading Offset**: Set an appropriate `offset` based on your use case\n5. **Choose Appropriate Quality**: Balance quality and file size with the `quality` prop\n\n## License\n\nMIT © Asfak Ahmed ( rahi )","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenui-labs%2Fzenui-image-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzenui-labs%2Fzenui-image-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenui-labs%2Fzenui-image-react/lists"}