React SDK

Het pakket @tracio/react verpakt de kern @tracio/sdk en biedt idiomatische React-primitieven: een provider die de agent mount, en hooks die je de bezoekers-ID en het identificatieresultaat aanreiken, inclusief laad- en foutstatus.

Installatie

npm install @tracio/react @tracio/sdk

react (18 of 19) is een peer-dependency en wordt verondersteld al in je app geïnstalleerd te zijn.

Setup

Verpak je applicatie met <TracioProvider>. Deze mount de TRACIO-agent bij de eerste render en roept tracio.destroy() automatisch aan wanneer de provider unmount.

import { TracioProvider } from "@tracio/react"

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

Provider-props

Geef ofwel publicKey plus de platte scalairen door, ofwel een volledig config-object. Wanneer beide worden meegegeven, wint config.

Hooks

useVisitorId()

Geeft de stabiele bezoekersidentificator terug, inclusief laad- en foutstatus.

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

getId() haalt de bezoekers-ID imperatief opnieuw op.

useTracioResult(opts?)

Geeft het volledige TracioResult terug (bezoekers-ID plus botdetectie).

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

opts.immediate staat standaard op true. Geef { immediate: false } door om het ophalen uit te stellen totdat je zelf getData() aanroept — handig achter een toestemmingsgate:

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

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

useTracio()

Escape-hatch die de onderliggende instantie teruggeeft voor gevorderd gebruik.

const { tracio } = useTracio()

Volledig voorbeeld

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

Volgende stappen

• JavaScript SDK-referentie — de kern @tracio/sdk-API waarop de hooks voortbouwen
• Foutafhandeling — foutcodes en retry-strategieën
• SDK's-overzicht — elk framework-pakket in één oogopslag