Loading...
Loading...
EventZR provides several React hook packages for integrating with the platform. These hooks handle authentication, data fetching, context switching, and more.
| Package | Purpose | Key Hooks |
|---|---|---|
| @eventzr/react-auth | Authentication state, login/logout, token management | useAuth, useLogin, useLogout, useSession |
| @eventzr/react-hooks | General-purpose platform hooks | useContextSwitcher, useTenant, useTeam, useRealtimeUpdates |
| @eventzr/portal-api | Portal-level user and preferences hooks | useCurrentUser, useUpdateProfile, useUserPreferences |
| @eventzr/support-hooks | Support ticket and feedback hooks | useSupportTickets, useCreateTicket, useFeedback |
| @eventzr/ads-hooks | Ad campaign management hooks | useAdCampaigns, useCreateAd, useAdAnalytics |
The primary authentication hook. Provides the current user, authentication state, and methods for login and logout.
import { useAuth } from '@eventzr/react-auth';
function ProtectedPage() {
const { user, isAuthenticated, isLoading, logout } = useAuth();
if (isLoading) return <Spinner />;
if (!isAuthenticated) return <Redirect to="/login" />;
return (
<div>
<h1>Welcome, {user.displayName}</h1>
<button onClick={logout}>Sign Out</button>
</div>
);
}Manages tenant and team context switching. When you switch context, all subsequent API calls automatically use the new context headers.
import { useContextSwitcher } from '@eventzr/react-hooks';
function TeamSelector() {
const { teams, currentTeam, switchTeam } = useContextSwitcher();
return (
<select
value={currentTeam?.id ?? ''}
onChange={(e) => switchTeam(e.target.value)}
>
{teams.map((team) => (
<option key={team.id} value={team.id}>{team.name}</option>
))}
</select>
);
}Fetches the current user profile including preferences and subscription status. Powered by TanStack Query with automatic caching and revalidation.
import { useCurrentUser } from '@eventzr/portal-api/hooks';
function ProfileBadge() {
const { data: user, isLoading } = useCurrentUser();
if (isLoading) return <SkeletonA className="h-8 w-32" />;
return (
<span>{user?.displayName ?? user?.email ?? 'Anonymous'}</span>
);
}All hook packages are available from the EventZR private registry. Add them to your portal's dependencies:
{
"dependencies": {
"@eventzr/react-auth": "workspace:*",
"@eventzr/react-hooks": "workspace:*",
"@eventzr/portal-api": "workspace:*"
}
}