@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

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

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

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.