SDK React

Pachetul @tracio/react încapsulează nucleul @tracio/sdk și expune primitive React idiomatice: un provider care montează agentul și hook-uri care vă oferă ID-ul vizitatorului și rezultatul identificării, împreună cu starea de încărcare și de eroare.

Instalare

npm install @tracio/react @tracio/sdk

react (18 sau 19) este o dependență peer și se presupune că este deja instalată în aplicația dumneavoastră.

Configurare

Încapsulați aplicația cu <TracioProvider>. Acesta montează agentul TRACIO la primul render și apelează automat tracio.destroy() când providerul se demontează.

import { TracioProvider } from "@tracio/react"

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

Props ale providerului

Transmiteți fie publicKey împreună cu scalarii simpli, fie un obiect config complet. Când sunt furnizate ambele, config are câștig de cauză.

Hook-uri

useVisitorId()

Returnează identificatorul stabil al vizitatorului împreună cu starea de încărcare și de eroare.

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

getId() re-preia ID-ul vizitatorului în mod imperativ.

useTracioResult(opts?)

Returnează întregul TracioResult (ID-ul vizitatorului plus detectarea boților).

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

opts.immediate are valoarea implicită true. Transmiteți { immediate: false } pentru a amâna preluarea până când apelați chiar dumneavoastră getData() — util în spatele unui gate de consimțământ:

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

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

useTracio()

Escape hatch care returnează instanța subiacentă pentru utilizare avansată.

const { tracio } = useTracio()

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

Pașii următori

• Referință SDK JavaScript — API-ul de bază @tracio/sdk pe care se construiesc hook-urile
• Gestionarea erorilor — coduri de eroare și strategii de reîncercare
• Prezentare generală SDK-uri — fiecare pachet de framework dintr-o privire