Skip to content

Commit 9f99c96

Browse files
izadoesdevizadoesdev
committed
hook examples
1 parent b1a4963 commit 9f99c96

File tree

9 files changed

+683
-0
lines changed

9 files changed

+683
-0
lines changed

‎apps/docs/components/sidebar-content.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,42 @@ export const contents: SidebarSection[] = [
160160
},
161161
],
162162
},
163+
{
164+
title: "Hook Examples",
165+
Icon: CodeIcon,
166+
list: [
167+
{
168+
title: "Overview",
169+
href: "/docs/hooks",
170+
icon: FileTextIcon,
171+
},
172+
{
173+
title: "Toast Tracking",
174+
href: "/docs/hooks/toast-tracking",
175+
icon: AtomIcon,
176+
},
177+
{
178+
title: "Form Tracking",
179+
href: "/docs/hooks/form-tracking",
180+
icon: FileTextIcon,
181+
},
182+
{
183+
title: "Modal Tracking",
184+
href: "/docs/hooks/modal-tracking",
185+
icon: MonitorIcon,
186+
},
187+
{
188+
title: "Feature Usage",
189+
href: "/docs/hooks/feature-usage",
190+
icon: LightningIcon,
191+
},
192+
{
193+
title: "Feedback Tracking",
194+
href: "/docs/hooks/feedback-tracking",
195+
icon: UserCheckIcon,
196+
},
197+
],
198+
},
163199
{
164200
title: "Privacy & Compliance",
165201
Icon: ShieldCheckIcon,

‎apps/docs/content/docs/hooks.mdx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
title: Hook Examples
3+
description: Example React hooks for tracking custom events and user interactions
4+
---
5+
6+
import { CodeBlock } from "@/components/docs";
7+
import { Callout } from "@/components/docs";
8+
import { Card, Cards } from "@/components/docs";
9+
10+
<Callout type="info">
11+
<strong>TL;DR</strong> — **Example hooks** you can copy and customize to track custom events in your application. **Track only what you need** and **avoid duplicate events**.
12+
</Callout>
13+
14+
These are example React hooks for tracking common user interactions and application events. Copy and customize them for your needs.
15+
16+
## Example Hooks
17+
18+
<Cards>
19+
<Card title="Toast Tracking" href="/docs/hooks/toast-tracking">
20+
Track toast notifications automatically to understand user feedback patterns and error rates
21+
</Card>
22+
<Card title="Form Tracking" href="/docs/hooks/form-tracking">
23+
Track form submissions with validation state and error patterns
24+
</Card>
25+
<Card title="Modal Tracking" href="/docs/hooks/modal-tracking">
26+
Track when modals and dialogs are opened and closed
27+
</Card>
28+
<Card title="Feature Usage" href="/docs/hooks/feature-usage">
29+
Track when users interact with specific features
30+
</Card>
31+
<Card title="Feedback Tracking" href="/docs/hooks/feedback-tracking">
32+
Track user feedback with server actions and client hooks
33+
</Card>
34+
</Cards>
35+
36+
## Best Practices
37+
38+
### 1. Prevent Duplicate Events
39+
40+
Use refs or Sets to track what's already been tracked:
41+
42+
<CodeBlock
43+
language="tsx"
44+
code={`const tracked = useRef(new Set<string>());
45+
46+
if (!tracked.current.has(eventId)) {
47+
tracked.current.add(eventId);
48+
track("event_name", { id: eventId });
49+
}`}
50+
/>
51+
52+
### 2. Track Only Essential Data
53+
54+
Avoid tracking sensitive information or excessive data:
55+
56+
<CodeBlock
57+
language="tsx"
58+
code={`// ✅ Good - Only essential properties
59+
track("purchase_completed", {
60+
order_id: "ORD-123",
61+
revenue: 99.99,
62+
currency: "USD",
63+
});
64+
65+
// ❌ Avoid - Too much data, includes PII
66+
track("purchase_completed", {
67+
order_id: "ORD-123",
68+
revenue: 99.99,
69+
currency: "USD",
70+
email: "[email protected]", // PII
71+
full_address: "...", // Sensitive
72+
credit_card_last_4: "1234", // Sensitive
73+
});`}
74+
/>
75+
76+
### 3. Use Consistent Event Names
77+
78+
Follow a naming convention (e.g., `snake_case`):
79+
80+
<CodeBlock
81+
language="tsx"
82+
code={`// ✅ Good - Consistent naming
83+
track("button_clicked");
84+
track("form_submitted");
85+
track("modal_opened");
86+
87+
// ❌ Avoid - Inconsistent naming
88+
track("buttonClick");
89+
track("form-submitted");
90+
track("ModalOpened");`}
91+
/>
92+
93+
### 4. Handle Errors Gracefully
94+
95+
Don't let tracking errors break your app:
96+
97+
<CodeBlock
98+
language="tsx"
99+
code={`const trackSafely = useCallback((eventName: string, properties?: Record<string, unknown>) => {
100+
try {
101+
track(eventName, properties);
102+
} catch (error) {
103+
console.error("Tracking error:", error);
104+
// Don't throw - tracking failures shouldn't break the app
105+
}
106+
}, []);`}
107+
/>
108+
109+
### 5. Conditional Tracking
110+
111+
Only track in production or when explicitly enabled:
112+
113+
<CodeBlock
114+
language="tsx"
115+
code={`export function useToastTracking() {
116+
const { toasts } = useSonner();
117+
const tracked = useRef(new Set<string | number>());
118+
const isEnabled = process.env.NODE_ENV === "production";
119+
120+
useEffect(() => {
121+
if (!isEnabled) return;
122+
123+
for (const toast of toasts) {
124+
if (!tracked.current.has(toast.id)) {
125+
tracked.current.add(toast.id);
126+
track("toast_shown", {
127+
type: toast.type,
128+
message: toast.title,
129+
});
130+
}
131+
}
132+
}, [toasts, isEnabled]);
133+
}`}
134+
/>
135+
136+
## Related Documentation
137+
138+
<Cards>
139+
<Card title="SDK Reference" href="/docs/sdk" icon="📚">
140+
Complete SDK API reference and configuration options
141+
</Card>
142+
<Card title="React Integration" href="/docs/Integrations/react" icon="⚛️">
143+
React-specific integration guide and examples
144+
</Card>
145+
<Card title="Custom Events" href="/docs/sdk#custom-event-tracking" icon="🎯">
146+
Learn more about custom event tracking patterns
147+
</Card>
148+
</Cards>
149+

‎apps/docs/content/docs/hooks/feature-usage.mdx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Feature Usage Tracking
3+
description: Track when users interact with specific features
4+
---
5+
6+
import { CodeBlock } from "@/components/docs";
7+
import { Callout } from "@/components/docs";
8+
import { Card, Cards } from "@/components/docs";
9+
10+
Track feature interactions to understand which features are most popular and how users engage with your application.
11+
12+
## Implementation
13+
14+
<CodeBlock
15+
language="tsx"
16+
code={`import { track } from "@databuddy/sdk";
17+
import { useCallback } from "react";
18+
19+
export function useFeatureTracking(featureName: string) {
20+
const trackUsage = useCallback(
21+
(action: string, properties?: Record<string, unknown>) => {
22+
track("feature_used", {
23+
feature: featureName,
24+
action,
25+
...properties,
26+
});
27+
},
28+
[featureName]
29+
);
30+
31+
return { trackUsage };
32+
}`}
33+
/>
34+
35+
## Usage
36+
37+
<CodeBlock
38+
language="tsx"
39+
code={`function ExportButton() {
40+
const { trackUsage } = useFeatureTracking("export_data");
41+
42+
const handleExport = async () => {
43+
trackUsage("export_started", { format: "csv" });
44+
try {
45+
await exportData();
46+
trackUsage("export_completed", { format: "csv" });
47+
} catch (error) {
48+
trackUsage("export_failed", { format: "csv", error: error.message });
49+
}
50+
};
51+
52+
return <button onClick={handleExport}>Export</button>;
53+
}`}
54+
/>
55+
56+
## What It Tracks
57+
58+
- **Event**: `feature_used`
59+
- **Properties**:
60+
- `feature`: Name of the feature being tracked
61+
- `action`: Specific action (e.g., "started", "completed", "failed")
62+
- Additional custom properties as needed
63+
64+
## Benefits
65+
66+
- **Feature Adoption**: Understand which features users actually use
67+
- **Usage Patterns**: Track feature usage across different user segments
68+
- **Performance Monitoring**: Track feature success/failure rates
69+
70+
<Callout type="info">
71+
Use different actions (started, completed, failed) to track the full lifecycle of feature interactions.
72+
</Callout>
73+
74+
## Related
75+
76+
<Cards>
77+
<Card title="Toast Tracking" href="/docs/hooks/toast-tracking">
78+
Track toast notifications automatically
79+
</Card>
80+
<Card title="Form Tracking" href="/docs/hooks/form-tracking">
81+
Track form submissions with validation state
82+
</Card>
83+
<Card title="Hooks Overview" href="/docs/hooks">
84+
View all available tracking hooks
85+
</Card>
86+
</Cards>
87+

0 commit comments

Comments
 (0)