thirdwebDocs

useResolvedMediaType

Defined in

Hook for resolving the media type and URL of a given URI (including IPFS URIs).

The <MediaRenderer /> component renders the relevant. HTML element for a given URL, including IPFS URIs. e.g. <img> for images, <video> for videos, etc.

Example

Usage with fully formed url

const Component = () => {
  const resolved = useResolvedMediaType(
    "https://example.com/video.mp4",
  );
  console.log("mime type", resolved.data.mimeType);
  console.log("url", resolved.data.url);
  return null;
};

Usage with IPFS cid

const Component = () => {
  const resolved = useResolvedMediaType(
    "ipfs://QmWATWQ7fVPP2EFGu71UkfnqhYXDYH566qy47CnJDgvsd",
  );
  console.log("mime type", resolved.data.mimeType);
  console.log("url", resolved.data.url);
  return null;
};
function useResolvedMediaType(
  uri?: string,
  mimeType?: string,
  gatewayUrl?: string,
): { mimeType: undefined | string; url: string };

Parameters

The uri to resolve (can be a url or a ipfs://\<cid\> )

Type

let uri: string;

The mime type of the media

Type

let mimeType: string;

The url of the IPFS gateway to use (defaults to https://ipfs.io/ipfs/ )

Type

let gatewayUrl: string;

Returns

let returnType: { mimeType: undefined | string; url: string };

The hook returns an object containing two properties:

  • url : The fully resolved URL, or undefined if the URI is invalid.

  • mimeType : The mime type of the media, or undefined if the URI is invalid.