React SDK

Paket @tracio/react membungkus inti @tracio/sdk dan menyediakan primitif React yang idiomatis: sebuah provider yang me-mount agen, serta hook yang memberi Anda visitor ID dan hasil identifikasi lengkap dengan status loading dan error.

Instalasi

npm install @tracio/react @tracio/sdk

react (18 atau 19) merupakan peer dependency dan diasumsikan sudah terpasang di aplikasi Anda.

Penyiapan

Bungkus aplikasi Anda dengan <TracioProvider>. Provider ini me-mount agen TRACIO pada render pertama dan memanggil tracio.destroy() secara otomatis ketika provider di-unmount.

import { TracioProvider } from "@tracio/react"

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

Props provider

Berikan publicKey beserta skalar datar, atau objek config yang lengkap. Bila keduanya diberikan, config yang menang.

Hook

useVisitorId()

Mengembalikan pengidentifikasi pengunjung yang stabil lengkap dengan status loading dan error.

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

getId() mengambil ulang visitor ID secara imperatif.

useTracioResult(opts?)

Mengembalikan TracioResult lengkap (visitor ID plus deteksi bot).

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

opts.immediate secara default bernilai true. Berikan { immediate: false } untuk menunda pengambilan hingga Anda sendiri memanggil getData() — berguna di balik consent gate:

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

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

useTracio()

Escape hatch yang mengembalikan instance yang mendasari untuk penggunaan tingkat lanjut.

const { tracio } = useTracio()

Contoh lengkap

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

Langkah selanjutnya

• Referensi JavaScript SDK — API inti @tracio/sdk yang menjadi fondasi hook
• Penanganan Error — kode error dan strategi retry
• Ikhtisar SDK — setiap paket framework sekilas pandang