React hooks

useMarketIndex

Load a market index artifact your app hosts, validated before it renders.

Usage

tsx

import { useMarketIndex } from "@whitehash/react"

const result = useMarketIndex("/market-index.json")

Return value

{
  index: MarketIndex | null
  loading: boolean
  error: string | null
  refresh(): void
}

Where the index comes from

A market index is an artifact your application owns rather than a chain read, so the hook takes a source instead of a project reference. One application serves a file from a CDN, another serves many indexes from a database, a third already holds one in memory. Pass null to skip loading.

tsx

// A file you host
useMarketIndex("/market-index.json")

// Your own API, one artifact per project. The key identifies the index, so an
// inline load closure does not restart the request on every render.
useMarketIndex({
  key: `${chain}/${id}`,
  load: () => fetch(`/api/market/${chain}/${id}`).then(response => response.json()),
})

// An index you already have
useMarketIndex(index)

Anything fetched or loaded goes through parseMarketIndex, so a truncated or foreign payload surfaces as error instead of a broken render. An index passed in directly is trusted; validate it yourself if it came from untrusted JSON. Use loadMarketIndex for the same fetch outside React.

Live result

loading…