React hooks overview

Using the Trigger.dev Realtime API from your React applications.

Our React hooks package provides a set of hooks that make it easy to interact with the Trigger.dev Realtime API from your React applications. You can use these hooks to subscribe to real-time updates, and trigger tasks from your frontend.

Installation

Install the @trigger.dev/react-hooks package in your project:

npm

npm add @trigger.dev/react-hooks

pnpm add @trigger.dev/react-hooks

yarn install @trigger.dev/react-hooks

Authentication

All hooks require authentication with a Public Access Token. Pass the token via the accessToken option:

import { useRealtimeRun } from "@trigger.dev/react-hooks";

export function MyComponent({
  runId,
  publicAccessToken,
}: {
  runId: string;
  publicAccessToken: string;
}) {
  const { run, error } = useRealtimeRun(runId, {
    accessToken: publicAccessToken,
    baseURL: "https://your-trigger-dev-instance.com", // optional, only needed if you are self-hosting Trigger.dev
  });

  // ...
}

Learn more about generating and managing tokens in our authentication guide.

Available hooks

We provide several categories of hooks:

• Triggering hooks - Trigger tasks from your frontend application
• Subscribe hooks - Subscribe to runs, batches, metadata, and more
• Streams hooks - Subscribe to real-time streams from your tasks
• SWR hooks - Fetch data once and cache it using SWR

SWR vs Realtime hooks

We offer two “styles” of hooks: SWR and Realtime. The SWR hooks use the swr library to fetch data once and cache it. The Realtime hooks use Trigger.dev Realtime to subscribe to updates in real-time.

It can be a little confusing which one to use because swr can also be configured to poll for updates. But because of rate-limits and the way the Trigger.dev API works, we recommend using the Realtime hooks for most use-cases.