Pinata is always evolving its developer tooling to provide the best experience to users, and today we’re excited to announce React Hooks for Pinata! React is, without a doubt, one of the most popular client side frameworks for building apps, and users have always looked for the best way to upload files inside React. With Pinata’s React Hooks, we now provide a more robust, secure, end to end solution for uploading files to Pinata. Let’s dive in to how you can start using them today!

First install the hooks using the same Pinata SDK you know and love.

npm i pinata

The React Hooks are part of a sub package called pinata/react, so they are totally optional if you choose to not use them. This package includes primary pieces which you can import like so:

import { useUpload, convert } from "pinata/react"

At the core of this package is useUpload, which provides a multitude of helpful tools for uploading from the client. Here’s a quick overview of what you get.

const {
	upload, // Method to upload a file using a presigned URL
	progress, // Progress state as integer
	loading, // Boolean uploading state
	uploadResponse, // Either full Upload Response or just a CID if you use Resumable Uploads
	error, // Error state
	pause, // Pause upload method
	resume, // Resume upload method
	cancel, // Cancel current upload method
} = useUpload();

The upload method is where the magic happens. It contains the ability to use either one piece uploads or resumable chunked uploads if the file is larger than 100MB, all handled automatically so you don’t need to worry about when to use it. In order for it to work, you’ll need a server that returns Presigned URLs (which can be done in just a few lines of code). Here’s the upload function in action:

  const handleUpload = async () => {
    if (!file) return;

    const urlRes = await fetch(`${import.meta.env.VITE_SERVER_URL}/presigned_url`);
    const urlData = await urlRes.json();

    try {
      // Use the upload function from useUpload hook
      await upload(file, "public", urlData.url, {
        metadata: {
          name: file.name || "Upload from Web",
          keyvalues: {
            app: "Pinata Web Demo",
            timestamp: Date.now().toString(),
          },
        },
      });
    } catch (uploadError) {
      console.error("Upload error:", uploadError);
    }
  };

All we have to do is pass in our file selected by the user, our network identifier "public" to designate if we want public or private IPFS, then the urlData.url aka Presigned URL to provide a secure upload experience. From there, we can add optional metadata such as name or keyvalues. Once it’s finished uploading, our uploadResponse will populate and we can use our convert function to get a usable IPFS link to access it.

  if (uploadResponse && !link) {
    async function setIpfsLink() {
      const ipfsLink = await convert(uploadResponse.cid, "<https://ipfs.io>");
      setLink(ipfsLink);
    }
    setIpfsLink();
  }

That simple! Client side uploads have never been easier, so be sure to check out the Pinata SDK React Hooks today with the official documentation. If you haven’t tried Pinata there’s never a better time than now to give it a shot; sign up today and get the best possible developer experience with IPFS.

Happy Pinning!