@xiaobai.li/react-tracing

A lightweight, extensible tracking SDK for React applications.
Designed for clarity, flexibility, and production use.

✨ Features

• 🚀 Simple and minimal core
• 🧩 Plugin-friendly architecture
• ⚛️ First-class React support
• 🧠 Stable tracker instance via Context
• 🛣 Optional React Router page tracking
• 📦 Tiny bundle size, no runtime dependencies

📦 Installation

npm install @xiaobai.li/react-tracing
# or
pnpm add @xiaobai.li/react-tracing
react and react-router-dom are required as peer dependencies.

🚀 Quick Start

import { Tracker } from '@xiaobai.li/react-tracing'

const tracker = new Tracker({
  appId: 'my-app',
  env: 'prod',
  transport(event) {
    console.log(event)
    // send to server
  }
})

tracker.track('page_view', { path: '/' })

⚛️ React Integration

import { SensorsProvider } from '@xiaobai.li/react-tracing'
import App from './App'

const trackerOptions = {
  appId: 'my-app',
  env: 'prod',
  transport: (event) => {
    console.log(event)
  },
}

export default function Root() {
  return (
    <SensorsProvider options={trackerOptions}>
      <App />
    </SensorsProvider>
  )
}

🧠 Using Tracker in Components

import { useTracker } from '@xiaobai.li/react-tracing'

export function Button() {
  const tracker = useTracker()

  return (
    <button onClick={() => tracker.track('click_button')}>
      Click
    </button>
  )
}

🛣 Router Tracking (Optional)

import { usePageView } from '@xiaobai.li/react-tracing'

export function RouteListener() {
  usePageView()
  return null
}

📚 API

new Tracker(options) Name Type Description appId string Application identifier env string Environment name transport function Event sender tracker.track(name, params?) Send a tracking event.

📄 License

MIT