React SDK
The React package wraps the browser runtime with an Attriax provider and hooks so you can keep page tracking and deep-link handling close to your routed UI.
Package surface
General guide for @attriax/react. Use the project workspace when you need detailed setup steps, release context, and project-specific values.
What teams use it for
These are the runtime jobs the product already exposes through the SDK and the matching workspace tools.
Provider-based setup
Keep the runtime in React context instead of hand-rolling singleton access across components.
Hooks for route changes
Track page views and deep links from the same place your router state already lives.
Fast app onboarding
Works well with the signed-in Vibe Setup prompt builder when teams want a guided rollout.
Integration notes
Keep the public docs lightweight, then open the project workspace when you need the exact setup steps for your own release flow.
Capabilities
- Wrap the app with AttriaxProvider and keep runtime initialization close to the React tree.
- Track route changes with hook-based page view helpers instead of wiring every transition manually.
- Subscribe to deep-link events with React hooks and hand resolved paths back to your router.
- Pass gdprEnabled through provider config and use attriax.consent.gdpr from hooks-backed UI flows.
- Use the same underlying browser runtime while keeping the integration shaped for SPA teams.
Notes
- The React wrapper is best for routed SPAs that already centralize navigation state.
- It relies on the browser SDK underneath, so web diagnostics and analytics expectations stay aligned.
- The project workspace can generate React-targeted Vibe Setup prompts when you want guided implementation steps.
Install
Use the React wrapper when you want the JS runtime plus React-aware provider and hook ergonomics.
Install command
npm install @attriax/react @attriax/jsExample
The snippet below mirrors the project workspace starting point while keeping the guide general instead of project-specific.
src/app-root.tsx
Wrap the app in AttriaxProvider, record page views from router state, and resolve deep links through the hooks-based runtime.
1import { useEffect } from 'react';
2import { useLocation, useNavigate } from 'react-router';
3import {
4 AttriaxProvider,
5 useAttriax,
6 useAttriaxDeepLinks,
7 useAttriaxPageView,
8} from '@attriax/react';
9
10function AppRoutes() {
11 return <div>Your routed application goes here.</div>;
12}
13
14function AttriaxRuntime() {
15 const navigate = useNavigate();
16 const location = useLocation();
17 const { attriax, isInitialized } = useAttriax();
18
19 // Track page changes with your router state.
20 useAttriaxPageView(location.pathname, {
21 disabled: !isInitialized,
22 effectKey: location.key,
23 pageTitle: document.title,
24 source: 'react_router',
25 });
26
27 // Listen for deep links that resolve after startup.
28 useAttriaxDeepLinks((event) => {
29 if (!event.found) {
30 return;
31 }
32
33 navigate(event.uri.pathname || '/');
34 });
35
36 useEffect(() => {
37 if (!isInitialized) {
38 return;
39 }
40
41 let active = true;
42
43 void (async () => {
44 const [initialDeepLink, originalInstallReferrer, reinstallReferrer] = await Promise.all([
45 attriax.deepLinks.waitForInitialDeepLink(),
46 attriax.referrer.getOriginalInstallReferrer(),
47 attriax.referrer.getReinstallReferrer(),
48 ]);
49
50 if (!active) {
51 return;
52 }
53
54 if (originalInstallReferrer) {
55 console.info('Original install campaign', originalInstallReferrer.campaign);
56 }
57
58 if (reinstallReferrer) {
59 console.info('Reinstall campaign', reinstallReferrer.campaign);
60 }
61
62 if (initialDeepLink?.found) {
63 navigate(initialDeepLink.uri.pathname || '/');
64 }
65 })();
66
67 return () => {
68 active = false;
69 };
70 }, [attriax, isInitialized, navigate]);
71
72 return <AppRoutes />;
73}
74
75export function AppRoot() {
76 return (
77 <AttriaxProvider
78 autoInit
79 config={{
80 projectToken: 'ax_your_project_token',
81 automaticPageTracking: false,
82 gdprEnabled: true,
83 }}
84 onInitError={(error) => console.error('Attriax init failed', error)}
85 >
86 <AttriaxRuntime />
87 </AttriaxProvider>
88 );
89}