React hooks for real-time task updates - Trigger

import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";

@trigger.dev/react-hooks gives your React components live access to background tasks. Subscribe to run progress, stream AI output as it generates, or trigger tasks directly from the browser.

Installation

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

bash

npm add @trigger.dev/react-hooks

bash

pnpm add @trigger.dev/react-hooks

bash

yarn install @trigger.dev/react-hooks

</CodeGroup>

Authentication

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

tsx

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

Hook category	What it does	Guide
Trigger hooks	Trigger tasks from the browser	Triggering
Run updates	Subscribe to run status, metadata, and tags	Run updates
Streaming	Consume AI output, file chunks, or any continuous data	Streaming
SWR hooks	One-time fetch with caching (not recommended for most cases)	SWR

SWR vs Realtime hooks

We offer two "styles" of hooks: SWR and Realtime. SWR hooks use the swr library to fetch data once and cache it. Realtime hooks use Trigger.dev Realtime to subscribe to updates as they happen.

<Note> It can be a little confusing which one to use because [swr](https://swr.vercel.app/) 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. </Note>