SDK de React

El paquete @tracio/react envuelve el SDK base @tracio/sdk y expone primitivas idiomáticas de React: un provider que monta el agente y hooks que le entregan el ID de visitante y el resultado de identificación con estado de carga y de error.

Instalación

npm install @tracio/react @tracio/sdk

react (18 o 19) es una peer dependency y se espera que ya esté instalado en su app.

Configuración

Envuelva su aplicación con <TracioProvider>. Monta el agente de TRACIO en el primer render y llama a tracio.destroy() automáticamente cuando el provider se desmonta.

import { TracioProvider } from "@tracio/react"

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

Props del provider

Pase o bien publicKey más los escalares planos, o bien un objeto config completo. Cuando se aportan ambos, gana config.

Hooks

useVisitorId()

Devuelve el identificador de visitante estable con estado de carga y de error.

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

getId() vuelve a obtener el ID de visitante de forma imperativa.

useTracioResult(opts?)

Devuelve el TracioResult completo (ID de visitante más detección de bots).

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

opts.immediate tiene el valor por defecto true. Pase { immediate: false } para diferir la obtención hasta que llame a getData() usted mismo, útil detrás de una barrera de consentimiento:

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

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

useTracio()

Vía de escape que devuelve la instancia subyacente para usos avanzados.

const { tracio } = useTracio()

Ejemplo completo

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

Próximos pasos

• Referencia del SDK de JavaScript — la API base de @tracio/sdk sobre la que se construyen los hooks
• Gestión de errores — códigos de error y estrategias de reintento
• Visión general de los SDKs — todos los paquetes por framework de un vistazo