SDK React

Le paquet @tracio/react encapsule le cœur @tracio/sdk et expose des primitives idiomatiques de React : un provider qui monte l'agent, et des hooks qui vous fournissent l'identifiant visiteur et le résultat d'identification avec l'état de chargement et d'erreur.

Installation

npm install @tracio/react @tracio/sdk

react (18 ou 19) est une peer dependency et doit déjà être installé dans votre application.

Configuration

Enveloppez votre application avec <TracioProvider>. Il monte l'agent TRACIO au premier rendu et appelle tracio.destroy() automatiquement lorsque le provider est démonté.

import { TracioProvider } from "@tracio/react"

function Root() {
  return (
    <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}>
      <App />
    </TracioProvider>
  )
}

Props du provider

Passez soit publicKey avec les scalaires simples, soit un objet config complet. Lorsque les deux sont fournis, config l'emporte.

Hooks

useVisitorId()

Renvoie l'identifiant visiteur stable avec l'état de chargement et d'erreur.

const { data, isLoading, error, isFetched, getId } = useVisitorId()
// data: string | undefined — the visitorId

getId() récupère à nouveau l'identifiant visiteur de manière impérative.

useTracioResult(opts?)

Renvoie le TracioResult complet (identifiant visiteur plus détection des bots).

const { data, isLoading, error, isFetched, getData } = useTracioResult()
// data: TracioResult | undefined

opts.immediate vaut true par défaut. Passez { immediate: false } pour différer la récupération jusqu'à ce que vous appeliez getData() vous-même — utile derrière une barrière de consentement :

const { data, getData } = useTracioResult({ immediate: false })

function onConsent() {
  getData() // identify only after the user opts in
}

useTracio()

Échappatoire qui renvoie l'instance sous-jacente pour un usage avancé.

const { tracio } = useTracio()

Exemple complet

import { TracioProvider, useVisitorId } from "@tracio/react"
function App() {
  return (
    <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}>
      <Page />
    </TracioProvider>
  )
}
function Page() {
  const { data: visitorId, isLoading, error } = useVisitorId()
  if (isLoading) return <span>Loading…</span>
  if (error) return <span>Error: {error.message}</span>
  return <span>Visitor: {visitorId}</span>
}

Étapes suivantes

• Référence du SDK JavaScript — l'API du cœur @tracio/sdk sur laquelle reposent les hooks
• Gestion des erreurs — codes d'erreur et stratégies de nouvelle tentative
• Aperçu des SDK — tous les paquets par framework en un coup d'œil