@jichio/react

@jichio/react fournit une intégration idiomatique React : un provider à monter au root layout, le suivi automatique des pageviews SPA, et la réexportation de l’API core.

Installation

pnpm add @jichio/react

react est une peer dependency. @jichio/core est tiré comme dépendance.

AnalyticsProvider

app/layout.tsx

import { AnalyticsProvider } from "@jichio/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <body>
        <AnalyticsProvider
          apiKey={process.env.NEXT_PUBLIC_ANALYTICS_KEY!}
          endpoint={process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT!}
        >
          {children}
        </AnalyticsProvider>
      </body>
    </html>
  );
}

Le provider crée l’instance createAnalytics({ source: "sdk-react" }), la détruit au démontage, et branche le suivi des pageviews SPA.

useAnalytics

"use client";
import { useAnalytics } from "@jichio/react";

export function StartTrial() {
  const analytics = useAnalytics();
  return (
    <button onClick={() => analytics.track("signup_completed", { plan: "pro" })}>
      Start free trial
    </button>
  );
}

Le hook renvoie l’instance courante : track, identify, page, flush.

Répartition des responsabilités

Comportement	Où
Création / destruction de l’instance `createAnalytics({ source: "sdk-react" })`	`AnalyticsProvider`
Pageviews SPA (Next.js `usePathname`, React Router `location`)	`sdk-react`
Pageview MPA initial + clics	délégué à `sdk-core` (`autoCapture: true`)
File, batch, retry, ingestion	sdk-core

Le suivi SPA appelle analytics.page({ loadType: "spa-navigation" }) à chaque changement de route via usePathname() (App Router). Le premier chargement (loadType: "initial") reste géré par l’auto-capture du core.

Identifier un utilisateur

"use client";
import { useEffect } from "react";
import { useAnalytics } from "@jichio/react";

export function IdentitySync({ user }: { user: CurrentUser | null }) {
  const analytics = useAnalytics();

  useEffect(() => {
    if (!user) return;
    analytics.identify(user.id, {
      email: user.email,
      role: user.role,
    });
  }, [analytics, user]);

  return null;
}

Voir le guide Identifier les utilisateurs pour le comportement complet d’identify.

Provider conditionnel (pattern recommandé)

Pour désactiver proprement l’analytics quand la config est absente (ex. environnements sans clé), enveloppez le provider :

export function JichioAnalyticsProvider({ children }: { children: React.ReactNode }) {
  const apiKey = process.env.NEXT_PUBLIC_ANALYTICS_KEY;
  const endpoint = process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT;

  if (!apiKey || !endpoint) return <>{children}</>; // no-op

  return (
    <AnalyticsProvider apiKey={apiKey} endpoint={endpoint}>
      {children}
    </AnalyticsProvider>
  );
}

Prise en main

SDK

Concepts

Guides

Installation

AnalyticsProvider

useAnalytics

Répartition des responsabilités

Identifier un utilisateur

Provider conditionnel (pattern recommandé)

​Installation

​AnalyticsProvider

​useAnalytics

​Répartition des responsabilités

​Identifier un utilisateur

​Provider conditionnel (pattern recommandé)

Installation

AnalyticsProvider

useAnalytics

Répartition des responsabilités

Identifier un utilisateur

Provider conditionnel (pattern recommandé)