React-SDK

Paketet @tracio/react omsluter kärn-@tracio/sdk och exponerar idiomatiska React-primitiver: en provider som monterar agenten, och hookar som ger dig besökar-ID:t och identifieringsresultatet med laddnings- och feltillstånd.

Installation

npm install @tracio/react @tracio/sdk

react (18 eller 19) är ett peer-beroende och förväntas redan vara installerat i din app.

Konfiguration

Omslut din applikation med <TracioProvider>. Den monterar TRACIO-agenten vid första renderingen och anropar tracio.destroy() automatiskt när providern avmonteras.

import { TracioProvider } from "@tracio/react"

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

Provider-props

Skicka antingen publicKey plus de platta skalärerna, eller ett fullständigt config-objekt. När båda anges vinner config.

Hookar

useVisitorId()

Returnerar den stabila besökaridentifieraren med laddnings- och feltillstånd.

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

getId() hämtar besökar-ID:t på nytt imperativt.

useTracioResult(opts?)

Returnerar det fullständiga TracioResult (besökar-ID plus botdetektering).

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

opts.immediate är som standard true. Skicka { immediate: false } för att skjuta upp hämtningen tills du själv anropar getData() — användbart bakom en samtyckesgrind:

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

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

useTracio()

Nödutgång som returnerar den underliggande instansen för avancerad användning.

const { tracio } = useTracio()

Fullständigt exempel

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ästa steg

• JavaScript-SDK-referens — kärn-@tracio/sdk-API:et som hookarna bygger på
• Felhantering — felkoder och omförsöksstrategier
• SDK-översikt — varje ramverkspaket i ett svep