{"library":"react-image","title":"React Image Component and Hook","description":"React Image is a library providing a robust `<img>` tag replacement and a `useImage` hook for React applications. It focuses on enhancing image loading by supporting multiple image sources for fallback, displaying custom preloader components while images are loading, and gracefully handling image loading errors. The current stable version is 4.1.0, but the package was last published over three years ago, suggesting a maintenance rather than active development cadence. A key differentiator is its internal `useImage` hook, which leverages React Suspense by default for declarative image loading states. It explicitly advises against using it for lazy loading, recommending native browser `loading=\"lazy\"` for that purpose. It allows developers to specify any React element as a loading indicator or an error fallback, providing a more polished user experience than default browser behaviors.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-image"],"cli":null},"imports":["import { Image } from 'react-image'","import { useImage } from 'react-image'","import type { ImageProps } from 'react-image'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Suspense } from 'react';\nimport { Image } from 'react-image';\n\nconst PlaceholderComponent: React.FC = () => (\n  <div style={{ background: '#f0f0f0', height: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n    Loading Image...\n  </div>\n);\n\nconst ErrorFallbackComponent: React.FC = () => (\n  <div style={{ background: '#ffcccc', color: '#cc0000', height: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n    Failed to load image.\n  </div>\n);\n\nconst App: React.FC = () => {\n  const imageUrls = [\n    'https://picsum.photos/800/600?random=1', // Primary image\n    'https://picsum.photos/600/400?random=2', // Fallback image 1\n    'https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png' // Fallback image 2\n  ];\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>\n      <h1>React Image Example</h1>\n      <p>This demonstrates loading an image with a custom placeholder and multiple fallbacks.</p>\n      <div style={{ maxWidth: '800px', margin: '20px auto', border: '1px solid #ddd' }}>\n        <Suspense fallback={<PlaceholderComponent />}>\n          <Image\n            srcList={imageUrls}\n            loader={<PlaceholderComponent />}\n            alt=\"Random unsplash image\"\n            style={{ width: '100%', height: 'auto', display: 'block' }}\n            errorFallback={<ErrorFallbackComponent />}\n          />\n        </Suspense>\n      </div>\n      <p>Note: The first valid URL from `srcList` will be used. If all fail, `errorFallback` is shown.</p>\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"This example showcases the `Image` component with a `Suspense` boundary, providing a custom loader and a fallback component if all specified images fail to load. It uses `srcList` for multiple fallback image sources.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}