Add some more react hooks & realtime docs

Author: ericallam

docs/mint.json

@@ -214,7 +214,9 @@
       "pages": [
         "realtime/overview",
         "realtime/subscribe-to-run",
-        "realtime/subscribe-to-runs-with-tag"
+        "realtime/subscribe-to-runs-with-tag",
+        "realtime/use-realtime-run",
+        "realtime/use-realtime-runs-with-tag"
       ]
     },
     {

docs/realtime/overview.mdx

@@ -69,6 +69,10 @@ for await (const run of runs.subscribeToBatch("batch-id")) {
 }
 ```
 
+### React hooks
+
+We also provide a set of React hooks that make it easy to use the Realtime API in your React components. See the [React hooks doc](/frontend/react-hooks) for more information.
+
 ## Run changes
 
 You will receive updates whenever a run changes for the following reasons:

docs/realtime/use-realtime-run.mdx

@@ -0,0 +1,38 @@
+---
+title: useRealtimeRun
+sidebarTitle: useRealtimeRun
+description: Subscribes to all changes to a run in a React component.
+---
+
+import RunObject from "/snippets/realtime/run-object.mdx";
+
+<RequestExample>
+
+```ts Example
+import { useRealtimeRun } from "@trigger.dev/react-hooks";
+import type { myTask } from "./trigger/tasks";
+
+export function MyComponent({ runId }: { runId: string }) {
+  const { run, error } = useRealtimeRun<typeof myTask>(runId);
+
+  if (error) return <div>Error: {error.message}</div>;
+
+  return <div>Run: {run.id}</div>;
+}
+```
+
+</RequestExample>
+
+This react hook subscribes to all changes to a run. See the [React hooks doc](/frontend/react-hooks) for more information on how to use this hook.
+
+### Response
+
+The react hook returns an object with the following properties:
+
+<ParamField path="run" type="object" required>
+  The run object. See the [Run object doc](realtime/overview#run-object) for more information.
+</ParamField>
+
+<ParamField path="error" type="Error">
+  An error object if an error occurred while subscribing to a run.
+</ParamField>

docs/realtime/use-realtime-runs-with-tag.mdx

@@ -0,0 +1,45 @@
+---
+title: useRealtimeRunsWithTag
+sidebarTitle: useRealtimeRunsWithTag
+description: Subscribes to all changes to runs with a specific tag in a React component.
+---
+
+import RunObject from "/snippets/realtime/run-object.mdx";
+
+<RequestExample>
+
+```ts Example
+import { useRealtimeRunsWithTag } from "@trigger.dev/react-hooks";
+import type { myTask, myOtherTask } from "./trigger/tasks";
+
+export function MyComponent({ tag }: { tag: string }) {
+  const { runs, error } = useRealtimeRunsWithTag<typeof myTask | typeof myOtherTask>(tag);
+
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      {runs.map((run) => (
+        <div key={run.id}>Run: {run.id}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+</RequestExample>
+
+This react hook subscribes to all changes to runs with a specific tag. See the [React hooks doc](/frontend/react-hooks) for more information on how to use this hook.
+
+### Response
+
+The react hook returns an object with the following properties:
+
+<ParamField path="runs" type="object[]" required>
+  An array of run objects. See the [Run object doc](/realtime/overview#run-object) for more
+  information.
+</ParamField>
+
+<ParamField path="error" type="Error">
+  An error object if an error occurred while subscribing.
+</ParamField>