02. Client SDK/React Framework

React Provider & Hooks

The React integration layer wraps your component tree with automated route analytics, real-time WebSocket live feeds, authentication contexts, and WebPush service worker subscriptions.

REACT CONTEXTS

4 Hooks

Complete Frontend Control

“Manage client authentication, query live content, track user funnels, and stream live dashboard events with four declarative hooks.”

Zero-Boilerplate State Management

<NexusProvider> API Reference

Mount this at the root of your application:

Parameter	Type	Requirement	Description
projectId	string	Optional	Overrides the global Project Node ID for this specific React component sub-tree.
disableAnalytics	boolean	Optional	Completely disables the telemetry tracker (useful for strict GDPR opt-outs). Default: `false`
hasConsent	boolean	Optional	Toggles whether cookies and persistent visitor IDs are stored on the client. Default: `true`
enableLiveFeed	boolean	Optional	Opens a persistent WebSocket connection to the Rust Sentry for live dashboard feeds. Default: `false`
autoPromptPush	boolean	Optional	Automatically requests notification permission and registers '/sw.js' on mount. Default: `true`
onLiveEvent	(event: LiveAnalyticsEvent) => void	Optional	Global event callback triggered whenever an analytics event fires across the project.

React Hooks Suite

HOOK / CONTENT

useNexus()

Provides access to the initialized NexusClient for client-side CMS queries and cache inspection.

HOOK / AUTHENTICATION

useNexusAuth()

Manages SiteUser identity: login, registration, password resets, and session rehydration.

HOOK / TELEMETRY

useNexusAnalytics()

Track custom funnel events, purchases, user traits, and identity aliasing.

HOOK / REAL-TIME

useNexusLiveFeed()

Stream live analytics events and visitor presence counts over WebSocket rooms.

1. `useNexus()`

Use this hook to fetch content dynamically inside client components:

tsx

1	"use client";
2	import { useNexus } from "@nexushub/client";
3	import { useEffect, useState } from "react";
4
5	export function InfinitePostList() {
6	const nexus = useNexus();
7	const [posts, setPosts] = useState([]);
8
9	useEffect(() => {
10	nexus.content.getCollection("blog_posts", { limit: 10 }).then((res) => {
11	setPosts(res.items);
12	});
13	}, [nexus]);
14
15	return (
16	<div className="grid gap-4">
17	{posts.map((p) => (
18	<article key={p.id}>{p.title}</article>
19	))}
20	</div>
21	);
22	}

2. `useNexusAuth()`

Authenticate website visitors, students, or customers:

tsx

1	"use client";
2	import { useNexusAuth } from "@nexushub/client/react";
3
4	export function UserProfileHeader() {
5	const { user, isAuthenticated, isLoading, logout, login } = useNexusAuth();
6
7	if (isLoading) return <div>Loading session...</div>;
8
9	if (!isAuthenticated) {
10	return (
11	<button onClick={() => login({ email: "user@domain.com", password: "password123" })}>
12	Sign In
13	</button>
14	);
15	}
16
17	return (
18	<div className="flex items-center gap-3">
19	<span>Welcome, {user?.displayName \|\| user?.email}</span>
20	<button onClick={logout}>Sign Out</button>
21	</div>
22	);
23	}

3. `useNexusAnalytics()`

Trigger custom e-commerce and conversion events:

tsx

1	"use client";
2	import { useNexusAnalytics } from "@nexushub/client";
3
4	export function CheckoutButton({ cartTotal, items }) {
5	const analytics = useNexusAnalytics();
6
7	const handlePurchase = () => {
8	analytics.trackPurchase({
9	orderId: "ord_998877",
10	total: cartTotal,
11	currency: "USD",
12	products: items.map(i => ({
13	id: i.id,
14	name: i.title,
15	price: i.price,
16	quantity: i.qty
17	}))
18	});
19	};
20
21	return <button onClick={handlePurchase}>Complete Purchase</button>;
22	}

4. `useNexusLiveFeed()`

Build live visitor activity feeds with WebSocket connectivity:

tsx

1	"use client";
2	import { useNexusLiveFeed } from "@nexushub/client";
3
4	export function LiveActivityTicker() {
5	const { latestEvent, isConnected } = useNexusLiveFeed();
6
7	if (!isConnected) return null;
8
9	return (
10	<div className="fixed bottom-4 right-4 bg-zinc-900 border border-zinc-800 p-3 rounded-xl text-xs">
11	<span className="h-2 w-2 rounded-full bg-emerald-400 inline-block mr-2 animate-pulse" />
12	<span>Live Event: {latestEvent?.eventType} on {latestEvent?.data?.url}</span>
13	</div>
14	);
15	}

02. Client SDK

Client Configuration