React hooks

useGatewayImage

Load an IPFS image and try another gateway if the first one is unavailable.

Usage

tsx

import { useGatewayImage } from "@whitehash/react"

const result = useGatewayImage(uri, "tezos:mainnet")

Fallback behavior

The hook turns an ipfs:// URI into one HTTP URL per configured gateway. Attach onError to the image: each browser error advances to the next URL. HTTP, data, and blob URLs pass through unchanged; onchfs uses the configured service worker or proxy and needs the token chain as a routing hint.

tsx

const image = useGatewayImage(token.displayUri, token.chain)

if (image.failed) return <ImageUnavailable />
return <img src={image.src} onError={image.onError} alt="" />

Live result

Fallback exhausted