React-SDK

Das Paket @tracio/react umhüllt das Kern-@tracio/sdk und stellt idiomatische React-Primitive bereit: einen Provider, der den Agenten mountet, und Hooks, die Ihnen die Besucher-ID und das Identifizierungsergebnis samt Lade- und Fehlerstatus liefern.

Installation

npm install @tracio/react @tracio/sdk

react (18 oder 19) ist eine Peer-Dependency und wird als bereits in Ihrer App installiert vorausgesetzt.

Einrichtung

Umhüllen Sie Ihre Anwendung mit <TracioProvider>. Er mountet den TRACIO-Agenten beim ersten Render und ruft tracio.destroy() automatisch auf, wenn der Provider unmountet.

import { TracioProvider } from "@tracio/react"

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

Provider-Props

Übergeben Sie entweder publicKey samt der flachen Skalare oder ein vollständiges config-Objekt. Wenn beides angegeben ist, gewinnt config.

Hooks

useVisitorId()

Gibt den stabilen Besucher-Identifikator samt Lade- und Fehlerstatus zurück.

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

getId() ruft die Besucher-ID imperativ erneut ab.

useTracioResult(opts?)

Gibt das vollständige TracioResult zurück (Besucher-ID plus Bot-Erkennung).

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

opts.immediate ist standardmäßig true. Übergeben Sie { immediate: false }, um den Abruf aufzuschieben, bis Sie getData() selbst aufrufen — nützlich hinter einem Einwilligungs-Gate:

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

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

useTracio()

Escape-Hatch, der die zugrunde liegende Instanz für fortgeschrittene Nutzung zurückgibt.

const { tracio } = useTracio()

Vollständiges Beispiel

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>
}

Nächste Schritte

• JavaScript-SDK-Referenz — die Kern-@tracio/sdk-API, auf der die Hooks aufbauen
• Fehlerbehandlung — Fehlercodes und Retry-Strategien
• SDKs-Überblick — jedes Framework-Paket auf einen Blick