Dan
9e41e83818
* Reordered react hooks + frontend sections * Updated the overview and nav * Separated out SWR hooks * Restructured metadata sections * Improved backend docs * Fixed broken link * Fixed broken links * Updated the structure * Restructured overview * Updated examples cards * Improved overview * Updated how it works * Updated auth * Added type safety to the run object page * made the subscribe description clearer * Fixed links in triggering * Fixed link * Removed examples footers * Copy tweak * Consolidated metadata and subscribe pages * moved metadata task examples to metadata * Fixed links * Fixing links like zelda * Removed dead import * Clearer titles * Cap R for Realtime * Fixes broken link --------- Co-authored-by: James Ritchie <james@trigger.dev>
74 lines
2.3 KiB
Plaintext
74 lines
2.3 KiB
Plaintext
---
|
|
title: React hooks overview
|
|
sidebarTitle: Overview
|
|
description: Using the Trigger.dev Realtime API from your React applications.
|
|
---
|
|
|
|
import RealtimeExamplesCards from "/snippets/realtime-examples-cards.mdx";
|
|
|
|
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:
|
|
|
|
<CodeGroup>
|
|
|
|
```bash npm
|
|
npm add @trigger.dev/react-hooks
|
|
```
|
|
|
|
```bash pnpm
|
|
pnpm add @trigger.dev/react-hooks
|
|
```
|
|
|
|
```bash yarn
|
|
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](/realtime/auth).
|
|
|
|
## Available hooks
|
|
|
|
We provide several categories of hooks:
|
|
|
|
- **[Triggering hooks](/realtime/react-hooks/triggering)** - Trigger tasks from your frontend application
|
|
- **[Subscribe hooks](/realtime/react-hooks/subscribe)** - Subscribe to runs, batches, metadata, and more
|
|
- **[Streams hooks](/realtime/react-hooks/streams)** - Subscribe to real-time streams from your tasks
|
|
- **[SWR hooks](/realtime/react-hooks/swr)** - 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](https://swr.vercel.app/) library to fetch data once and cache it. The Realtime hooks use [Trigger.dev Realtime](/realtime) to subscribe to updates in real-time.
|
|
|
|
<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>
|