React SDK

@tracio/react पैकेज कोर @tracio/sdk को रैप करता है और idiomatic React primitives उपलब्ध कराता है: एक provider जो agent को माउंट करता है, और hooks जो आपको loading तथा error state के साथ visitor ID और identification result देते हैं।

Installation

npm install @tracio/react @tracio/sdk

react (18 या 19) एक peer dependency है और यह अपेक्षित है कि यह आपके ऐप में पहले से इंस्टॉल हो।

Setup

अपने application को <TracioProvider> से रैप करें। यह पहले render पर TRACIO agent को माउंट करता है और provider के unmount होने पर स्वतः tracio.destroy() को कॉल करता है।

import { TracioProvider } from "@tracio/react"

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

Provider props

या तो publicKey के साथ flat scalars पास करें, या एक पूर्ण config object। जब दोनों दिए जाते हैं, तो config जीतता है।

Hooks

useVisitorId()

loading और error state के साथ स्थिर visitor identifier लौटाता है।

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

getId() visitor ID को imperatively फिर से fetch करता है।

useTracioResult(opts?)

पूरा TracioResult लौटाता है (visitor ID के साथ bot detection)।

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

opts.immediate का default true है। fetch को तब तक टालने के लिए { immediate: false } पास करें जब तक आप स्वयं getData() को कॉल न करें — किसी consent gate के पीछे यह उपयोगी है:

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

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

useTracio()

Escape hatch जो उन्नत उपयोग के लिए अंतर्निहित instance लौटाता है।

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 Reference — कोर @tracio/sdk API जिस पर hooks आधारित हैं
• Error Handling — error codes और retry strategies
• SDKs overview — हर framework पैकेज एक नज़र में