React SDK

Пакет @tracio/react обгортає базовий @tracio/sdk і надає ідіоматичні React-примітиви: провайдер, який монтує агента, та хуки, що повертають вам ідентифікатор відвідувача й результат ідентифікації разом зі станом завантаження та помилки.

Встановлення

npm install @tracio/react @tracio/sdk

react (18 або 19) є peer-залежністю, і передбачається, що він уже встановлений у вашому застосунку.

Налаштування

Обгорніть свій застосунок компонентом <TracioProvider>. Він монтує агента TRACIO під час першого рендеру та автоматично викликає tracio.destroy(), коли провайдер розмонтовується.

import { TracioProvider } from "@tracio/react"

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

Пропси провайдера

Передавайте або publicKey разом із плоскими скалярами, або повний обʼєкт config. Коли задано і те, і інше, перемагає config.

Хуки

useVisitorId()

Повертає стабільний ідентифікатор відвідувача разом зі станом завантаження та помилки.

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

getId() імперативно повторно отримує ідентифікатор відвідувача.

useTracioResult(opts?)

Повертає повний TracioResult (ідентифікатор відвідувача плюс виявлення ботів).

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

opts.immediate за замовчуванням має значення true. Передайте { immediate: false }, щоб відкласти отримання, доки ви самі не викличете getData() — корисно за згодою користувача (consent gate):

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

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

useTracio()

Escape hatch, що повертає базовий екземпляр для просунутого використання.

const { tracio } = useTracio()

Повний приклад

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

Наступні кроки

• Довідник JavaScript SDK — базовий API @tracio/sdk, на якому побудовані хуки
• Обробка помилок — коди помилок і стратегії повторних спроб
• Огляд SDK — усі пакети для фреймворків з першого погляду