useResolvedMediaType

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

import { useResolvedMediaType } from "@thirdweb-dev/react";

const { url, mimeType } = useResolvedMediaType(
  "https://example.com/image.jpg", // URL or URI of the media asset
);

IPFS Media Renderer

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

Usage

Provide the URI of the media asset as the argument.

import { useResolvedMediaType } from "@thirdweb-dev/react";

function App() {
  const { url, mimeType } = useResolvedMediaType(
    "https://example.com/image.jpg", // URL or URI of the media asset
  );

  return <img src={url} type={mimeType} />;
}

Return Value

Return Value

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.

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