React SDK

Pakiet @tracio/react opakowuje bazowy @tracio/sdk i udostępnia idiomatyczne prymitywy Reacta: provider, który montuje agenta, oraz hooki, które przekazują Ci identyfikator odwiedzającego i wynik identyfikacji wraz ze stanem ładowania i błędu.

Instalacja

npm install @tracio/react @tracio/sdk

react (18 lub 19) jest peer dependency i zakłada się, że jest już zainstalowany w Twojej aplikacji.

Konfiguracja

Opakuj swoją aplikację komponentem <TracioProvider>. Montuje on agenta TRACIO przy pierwszym renderze i automatycznie wywołuje tracio.destroy(), gdy provider jest odmontowywany.

import { TracioProvider } from "@tracio/react"

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

Propsy providera

Przekaż albo publicKey wraz z płaskimi skalarami, albo kompletny obiekt config. Gdy podano oba, wygrywa config.

Hooki

useVisitorId()

Zwraca stabilny identyfikator odwiedzającego wraz ze stanem ładowania i błędu.

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

getId() imperatywnie pobiera ponownie identyfikator odwiedzającego.

useTracioResult(opts?)

Zwraca pełny TracioResult (identyfikator odwiedzającego plus wykrywanie botów).

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

opts.immediate domyślnie ma wartość true. Przekaż { immediate: false }, aby odroczyć pobranie do momentu, gdy sam wywołasz getData() — przydatne za bramką zgody:

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

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

useTracio()

Furtka awaryjna, która zwraca bazową instancję do zaawansowanych zastosowań.

const { tracio } = useTracio()

Pełny przykład

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

Kolejne kroki

• Dokumentacja JavaScript SDK — bazowe API @tracio/sdk, na którym oparte są hooki
• Obsługa błędów — kody błędów i strategie ponawiania
• Przegląd SDK — każdy pakiet frameworkowy w skrócie