# React / Next.js
> React component and hooks for tracking analytics in React and Next.js applications
import { Callout, CodeBlock, Card, Cards } from "@/components/docs";
The Databuddy React SDK provides a component for script injection and hooks for custom event tracking. Works with React 18+, Next.js 13+, and other React-based frameworks.
**Package**: `@databuddy/sdk` | **Import**: `@databuddy/sdk/react`
## Installation
{`bun add @databuddy/sdk`}
## Quick Start
Add the `Databuddy` component to your root layout:
{`import { Databuddy } from "@databuddy/sdk/react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}`}
## Databuddy Component
The `Databuddy` component injects the tracking script and configures analytics. It renders nothing to the DOM.
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `clientId` | `string` | Auto-detected | Your client ID (auto-detects from `NEXT_PUBLIC_DATABUDDY_CLIENT_ID`) |
| `disabled` | `boolean` | `false` | Disable all tracking |
| `debug` | `boolean` | `false` | Enable debug logging |
### Tracking Features
| Prop | Default | Description |
|------|---------|-------------|
| `trackWebVitals` | `false` | FCP, LCP, INP, CLS, TTFB, and FPS |
| `trackErrors` | `false` | JavaScript errors and unhandled rejections |
| `trackOutgoingLinks` | `false` | Clicks on external links |
| `trackInteractions` | `false` | Button clicks and form submissions |
| `trackAttributes` | `false` | Elements with `data-track` attributes |
| `trackHashChanges` | `false` | Hash changes in the URL |
### Batching & Performance
| Prop | Default | Description |
|------|---------|-------------|
| `enableBatching` | `true` | Group events into batches |
| `batchSize` | `10` | Events per batch (1-50) |
| `batchTimeout` | `5000` | Batch timeout in ms |
| `samplingRate` | `1.0` | Event sampling rate (0.0-1.0) |
### Privacy
| Prop | Type | Description |
|------|------|-------------|
| `skipPatterns` | `string[]` | Skip tracking on matching paths |
| `maskPatterns` | `string[]` | Mask sensitive URL segments |
### Full Example
{`import { Databuddy } from "@databuddy/sdk/react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}`}
## Tracking Events
Import tracker helpers to track custom events:
{`import { track } from "@databuddy/sdk";
function SignupButton() {
const handleClick = () => {
track("signup_clicked", {
source: "header",
plan: "pro"
});
};
return ;
}`}
The identity helpers (`identify`, `setTraits`, `clearProfile`, `getProfileId`) and the flags hooks (`FlagsProvider`, `useFlag`, `useFlags`) are also exported from `@databuddy/sdk/react`.
### Common Patterns
{`import { track, trackError } from "@databuddy/sdk";
// E-commerce
track("product_viewed", {
product_id: "P12345",
category: "Electronics",
price: 299.99
});
track("purchase_completed", {
order_id: "ORD-789",
revenue: 299.99,
currency: "USD"
});
// Feature usage
track("feature_used", {
feature: "export_data",
user_tier: "premium"
});
// Error tracking
try {
await riskyOperation();
} catch (error) {
trackError(error.message, {
stack: error.stack,
context: "checkout_flow"
});
}`}
## Environment Setup
{`NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your-client-id-here`}
The component auto-detects the client ID from this environment variable.
## Pages Router
For Next.js Pages Router, add to `_app.tsx`:
{`import { Databuddy } from "@databuddy/sdk/react";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}`}
## Development Mode
Disable tracking during development:
{``}
## Data Attributes
Enable automatic tracking of elements with `data-track` attributes:
{`
{/* Automatically tracks button_click event */}
`}
## Related
track, flush, getAnonymousId, and more helper functions
Control feature rollouts with FlagsProvider and hooks
Complete configuration reference