@tracio/react 패키지는 코어 @tracio/sdk를 감싸 관용적인 React 프리미티브를 제공합니다. 에이전트를 마운트하는 provider와, 방문자 ID 및 로딩·오류 상태를 포함한 식별 결과를 넘겨주는 훅들입니다.
npm install @tracio/react @tracio/sdkreact(18 또는 19)는 peer dependency이며, 이미 앱에 설치되어 있다고 가정합니다.
애플리케이션을 <TracioProvider>로 감싸세요. 첫 렌더 시 TRACIO 에이전트를 마운트하고, provider가 언마운트될 때 tracio.destroy()를 자동으로 호출합니다.
import { TracioProvider } from "@tracio/react"
function Root() { return ( <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}> <App /> </TracioProvider> )}| Prop | 타입 | 설명 |
|---|---|---|
publicKey | string | 공개 키. 대시보드에서 복사하세요. |
config | TracioConfig | 전체 설정 객체. 아래의 평면 스칼라 props보다 우선합니다. |
endpoint | string | 커스텀 API 엔드포인트(퍼스트파티 프록시 엔드포인트용). |
scriptUrl | string | 에이전트 스크립트의 커스텀 URL(퍼스트파티 프록시 엔드포인트용). |
debug | boolean | 상세 진단 정보를 콘솔에 기록합니다. |
timeoutMs | number | 타임아웃되기 전 결과를 기다리는 시간(기본값 15000). |
children | ReactNode | 필수 — 감쌀 React 서브트리. |
publicKey와 평면 스칼라를 함께 전달하거나, 완전한 config 객체를 전달하세요. 둘 다 제공되면 config가 우선합니다.
로딩·오류 상태를 포함한 안정적인 방문자 식별자를 반환합니다.
const { data, isLoading, error, isFetched, getId } = useVisitorId()// data: string | undefined — the visitorIdgetId()는 방문자 ID를 명령형으로 다시 가져옵니다.
전체 TracioResult(방문자 ID와 봇 탐지)를 반환합니다.
const { data, isLoading, error, isFetched, getData } = useTracioResult()// data: TracioResult | undefinedopts.immediate의 기본값은 true입니다. { immediate: false }를 전달하면 직접 getData()를 호출할 때까지 가져오기를 미룰 수 있습니다 — 동의 게이트 뒤에서 유용합니다.
const { data, getData } = useTracioResult({ immediate: false })
function onConsent() { getData() // identify only after the user opts in}고급 사용을 위해 하위 인스턴스를 반환하는 이스케이프 해치입니다.
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>}@tracio/sdk API