React SDK

החבילה @tracio/react עוטפת את הליבה @tracio/sdk וחושפת פרימיטיבים אידיומטיים של React: Provider שטוען את הסוכן, ו-hooks שמעבירים לכם את מזהה המבקר ואת תוצאת הזיהוי יחד עם מצב טעינה ושגיאה.

התקנה

npm install @tracio/react @tracio/sdk

react (18 או 19) הוא peer dependency ומצופה שיהיה כבר מותקן באפליקציה שלכם.

הגדרה

עטפו את האפליקציה שלכם ב-<TracioProvider>. הוא טוען את סוכן TRACIO בעת הרנדר הראשון וקורא ל-tracio.destroy() באופן אוטומטי כאשר ה-Provider מוסר מהעץ (unmount).

import { TracioProvider } from "@tracio/react"

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

מאפייני ה-Provider

העבירו או את publicKey יחד עם הסקלרים השטוחים, או אובייקט config שלם. כאשר שניהם מסופקים, config גובר.

Hooks

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 שעליו נבנים ה-hooks
• טיפול בשגיאות — קודי שגיאה ואסטרטגיות ניסיון חוזר
• סקירת SDKs — כל חבילת framework במבט אחד