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.
SDK / React
This section stays intentionally general. For detailed configuration, project-specific diagnostics, release context, and exact disclosure guidance, open the app workspace for your project.
Package surface
General guide for @attriax/react. Use the app 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 app 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.
- 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 app 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 app 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 void (async () => {
30 const result = await event.resolve();
31 if (!result.resolution) {
32 return;
33 }
34
35 navigate('/' + result.resolution.deepLink.path);
36 })();
37 });
38
39 useEffect(() => {
40 if (!isInitialized) {
41 return;
42 }
43
44 let active = true;
45
46 void (async () => {
47 const [initialDeepLink, installReferrer] = await Promise.all([
48 attriax.deepLinks.waitForInitialDeepLink(),
49 attriax.installReferrer,
50 ]);
51
52 if (!active) {
53 return;
54 }
55
56 if (installReferrer) {
57 console.info('Install campaign', installReferrer.campaign);
58 }
59
60 if (initialDeepLink?.resolution) {
61 navigate('/' + initialDeepLink.resolution.deepLink.path);
62 }
63 })();
64
65 return () => {
66 active = false;
67 };
68 }, [attriax, isInitialized, navigate]);
69
70 return <AppRoutes />;
71}
72
73export function AppRoot() {
74 return (
75 <AttriaxProvider
76 autoInit
77 config={{
78 appToken: 'ax_your_app_token',
79 automaticPageTracking: false,
80 }}
81 onInitError={(error) => console.error('Attriax init failed', error)}
82 >
83 <AttriaxRuntime />
84 </AttriaxProvider>
85 );
86}