open-index/open-npm huggingface dataset:
npm package: @juanedev/analytics-react
Description: React SDK for `@juanedev/analytics-core`. It initializes sessions, tracks pageviews automatically on route changes, and exposes a simple `useAnalytics()` hook for custom events.
Latest version: 0.1.5

# @juane/analytics-react

React SDK for `@juanedev/analytics-core`. It initializes sessions, tracks pageviews automatically on route changes, and exposes a simple `useAnalytics()` hook for custom events.

- ESM + CJS output
- Built on `@juanedev/analytics-core`
- Fixed endpoints: AP∫ `https://track.juane.dev`, WebSocket `wss://track.juane.dev`

## Installation

```bash∫
npm install @juane/analytics-react
# or
yarn add @juane/analytics-react
# or
pnpm add @juane/analytics-react
```

Peer deps:
- react ^18
- react-dom ^18

## Quick start

```tsx
import { AnalyticsProvider, useAnalytics } from '@juanedev/analytics-react';

function App() {
  return (
    <AnalyticsProvider websiteId="mi-web-123">
      <MyRoutes />
    </AnalyticsProvider>
  );
}

function Button() {
  const { trackEvent } = useAnalytics();
  return (
    <button onClick={() => trackEvent('button_click', { color: 'red' })}>
      Click me
    </button>
  );
}
```

## API

### <AnalyticsProvider>
Props:
- `websiteId: string` (required)

Behavior:
- Creates or retrieves `userId` and creates `sessionId` using `@juanedev/analytics-core`.
- Sends an initial `pageview` on mount.
- Listens to browser history changes (pushState/replaceState/popstate) and sends `pageview` automatically.
- Opens WebSocket to `wss://track.juane.dev` with heartbeats and emits `session:end` on unmount/unload.

### useAnalytics()
Returns:
- `{ trackEvent(eventName: string, properties?: Record<string, any>): Promise<any> }`
  - Sends an event to `https://track.juane.dev/track/event` using `@juanedev/analytics-core` payload helpers.

## Notes
- For SPAs, `pageview` is auto-sent on navigation. If you use a router that doesn’t trigger history events, manually call `trackEvent`/`trackPageview` via the core.
- Runs only on the client; do not call inside SSR-only code paths.

## Build
- `npm run build` outputs `dist/index.esm.js`, `dist/index.cjs.js`, and `dist/index.d.ts`.