Decentralized Storage (IPFS)

EVM Kit includes functionality to easily upload to, and render files from IPFS via a gateway; powered by thirdweb Storage.

The app comes with a DecentralizedStorage component to showcase how to upload to and render files from IPFS.

​

Upload (and pin) Files to IPFS

Use the useStorageUpload hook to upload files to IPFS.

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

function App() {
  const { mutateAsync: upload } = useStorageUpload();
}

​

Render Files from IPFS

Use the MediaRenderer component to render any type of file from IPFS; including images, videos, audio files, 3D models, and more.

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

function Home() {
  return (
    // Any URL that points to media (IPFS URI, HTTP URL, etc.)
    <MediaRenderer src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X" />
  );
}