React SDK

แพ็กเกจ @tracio/react ห่อหุ้ม @tracio/sdk ที่เป็นแกนหลักไว้ และเปิดให้ใช้งาน primitive ของ React ในรูปแบบที่เป็นสำนวนธรรมชาติของ React ได้แก่ provider ที่ทำการ mount agent และ hook ที่ส่งมอบ visitor ID และผลการระบุตัวตนพร้อมสถานะการโหลดและสถานะข้อผิดพลาดให้คุณ

การติดตั้ง

npm install @tracio/react @tracio/sdk

react (เวอร์ชัน 18 หรือ 19) เป็น peer dependency และคาดว่าได้รับการติดตั้งไว้ในแอปของคุณอยู่แล้ว

การตั้งค่า

ห่อหุ้มแอปพลิเคชันของคุณด้วย <TracioProvider> โดยจะทำการ mount agent ของ TRACIO เมื่อ render ครั้งแรก และเรียก tracio.destroy() โดยอัตโนมัติเมื่อ provider ถูก unmount

import { TracioProvider } from "@tracio/react"

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

Props ของ provider

ส่งค่าอย่างใดอย่างหนึ่ง ระหว่าง publicKey พร้อมสเกลาร์แบบแบน หรือออบเจ็กต์ config แบบสมบูรณ์ เมื่อระบุทั้งสองอย่าง config จะมีผลเหนือกว่า

Hooks

useVisitorId()

คืนค่าตัวระบุ visitor ที่คงที่พร้อมสถานะการโหลดและสถานะข้อผิดพลาด

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

getId() ดึง visitor ID ใหม่แบบ imperative

useTracioResult(opts?)

คืนค่า TracioResult แบบเต็ม (visitor ID พร้อมการตรวจจับบอท)

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()

ช่องทางลัดที่คืนค่า 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 — API แกนหลัก @tracio/sdk ที่ hook เหล่านี้สร้างขึ้นบนพื้นฐานของมัน
• การจัดการข้อผิดพลาด — รหัสข้อผิดพลาดและกลยุทธ์การลองใหม่
• ภาพรวม SDK — ทุกแพ็กเกจของแต่ละเฟรมเวิร์กในที่เดียว