React SDK

Balíček @tracio/react obaluje jádro @tracio/sdk a poskytuje idiomatické React primitivy: provider, který připojí agenta, a hooky, které vám předají ID návštěvníka a výsledek identifikace včetně stavu načítání a chyb.

Instalace

npm install @tracio/react @tracio/sdk

react (18 nebo 19) je peer dependency a předpokládá se, že je již ve vaší aplikaci nainstalován.

Nastavení

Obalte svou aplikaci komponentou <TracioProvider>. Připojí TRACIO agenta při prvním renderu a automaticky zavolá tracio.destroy(), když se provider odpojí.

import { TracioProvider } from "@tracio/react"

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

Props providera

Předejte buď publicKey spolu s plochými skaláry, nebo kompletní objekt config. Pokud je zadáno obojí, vyhrává config.

Hooky

useVisitorId()

Vrací stabilní identifikátor návštěvníka včetně stavu načítání a chyb.

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

getId() imperativně znovu načte ID návštěvníka.

useTracioResult(opts?)

Vrací kompletní TracioResult (ID návštěvníka plus detekci botů).

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

opts.immediate je výchozí true. Předáním { immediate: false } odložíte načtení, dokud sami nezavoláte getData() — užitečné za souhlasovou bránou:

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

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

useTracio()

Únikový poklop, který vrací podkladovou instanci pro pokročilé použití.

const { tracio } = useTracio()

Kompletní příklad

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

Další kroky

• Referenční příručka JavaScript SDK — základní API @tracio/sdk, na kterém hooky staví
• Zpracování chyb — chybové kódy a strategie opakování
• Přehled SDK — každý balíček frameworku na první pohled