useThumbnail

function useThumbnail(
  data: Data | null | undefined,
  options?: {
    width?: number;
    height?: number;
  },
): string | null;

Returns an object URL pointing at a PNG thumbnail of data. Returns null when:

Thumbnail is still being generated or
data is nullish, or if it does not support thumbnails.

The thumbnail is generated asynchronously via requestIdleCallback (falling back to a 0ms setTimeout).

Parameters

Parameter	Type	Description
`data`	Data \| `null` \| `undefined`	The dataset to generate a thumbnail for. Currently only supports `SharedImageSet`.
`options?`	{ `width?`: `number`; `height?`: `number`; }	-
`options.width?`	`number`	Logical width in CSS pixels (default 200).
`options.height?`	`number`	Logical height in CSS pixels (default 200).

Returns

string | null

A blob URL or null.

Example

tsx

function DatasetCard({ data }: { data: Data }) {
  const url = useThumbnail(data);
  return url ? <img src={url} alt={data.name} /> : <Placeholder />;
}