Tracks whether the image inside a wrapper is loading, loaded or failed, whatever component drew it, so a card or a gallery can swap a broken image for a fallback.
Examples of v0.1.1 are shown as code; only the latest version runs live. Open the live examples →
An image that loads reports `loaded`; one that breaks reports `error`.
Basic Use Image Status
1const LOADED_IMAGE =2 "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='100'><rect width='160' height='100' fill='%23c9b6e4'/></svg>";34const BROKEN_IMAGE = "/image-that-does-not-exist.jpg";56const StatusImage = ({ src, alt }: { src: string; alt: string }) => {7 const { ref, status, handlers } = useImageStatus(src);89 return (10 <div ref={ref} {...handlers}>11 <img src={src} alt={alt} width={160} height={100} />12 <p>Status: {status}</p>13 </div>14 );15};1617const BasicUseImageStatus = () => (18 <>19 <StatusImage src={LOADED_IMAGE} alt="A lilac swatch" />20 <StatusImage src={BROKEN_IMAGE} alt="A missing picture" />21 </>22);2324render(<BasicUseImageStatus />);