Docs

useResolvedMediaType

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;
};

Parameters

Returns

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.