@doow/track-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Doow
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,182 @@
+# Doow Track React SDK
+
+[![React](https://img.shields.io/badge/React-17+-blue)](https://react.dev/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue)](https://www.typescriptlang.org/)
+[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+Official React SDK for [Doow](https://doow.co) usage telemetry.
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| **React 17+** | Hooks and Context API |
+| **TypeScript** | Full type safety |
+| **Batching** | Events queued and sent in configurable batches |
+| **Compression** | Automatic gzip via CompressionStream |
+| **Lifecycle** | Auto-flush on beforeunload/visibilitychange |
+| **Beacon** | Reliable delivery with sendBeacon fallback |
+
+---
+
+## Installation
+
+```bash
+npm install @doow/track-react
+# or
+yarn add @doow/track-react
+# or
+pnpm add @doow/track-react
+```
+
+---
+
+## Quick Start
+
+### Provider Setup
+
+```tsx
+import { DoowProvider } from '@doow/track-react';
+
+function App() {
+  return (
+    <DoowProvider apiKey="dk_your_api_key">
+      <YourApp />
+    </DoowProvider>
+  );
+}
+```
+
+### Track Events
+
+```tsx
+import { useTrackEvent } from '@doow/track-react';
+
+function FeatureButton() {
+  const track = useTrackEvent();
+
+  const handleClick = () => {
+    track({
+      metric: 'feature_usage',
+      quantity: 1,
+      licenseId: 'lic_abc123',
+      attribution: { feature: 'export' },
+    });
+  };
+
+  return <button onClick={handleClick}>Export</button>;
+}
+```
+
+### Track on Mount
+
+```tsx
+import { useTrackOnMount } from '@doow/track-react';
+
+function Dashboard() {
+  useTrackOnMount({
+    metric: 'page_view',
+    quantity: 1,
+    licenseId: 'lic_abc123',
+    attribution: { page: 'dashboard' },
+  });
+
+  return <div>Dashboard</div>;
+}
+```
+
+### Track on Change
+
+```tsx
+import { useTrackOnChange } from '@doow/track-react';
+
+function TokenCounter({ tokens }: { tokens: number }) {
+  useTrackOnChange(tokens, (value) => ({
+    metric: 'tokens_used',
+    quantity: value,
+    licenseId: 'lic_abc123',
+  }));
+
+  return <span>{tokens} tokens</span>;
+}
+```
+
+---
+
+## Configuration
+
+```tsx
+<DoowProvider
+  apiKey="dk_your_api_key"
+  options={{
+    endpoint: 'https://api.doow.co',
+    enabled: true,
+    debug: process.env.NODE_ENV === 'development',
+    flushAt: 20,
+    flushIntervalMs: 10000,
+    maxQueueSize: 10000,
+    timeoutMs: 10000,
+    retryCount: 3,
+    disableCompression: false,
+    attribution: { app: 'my-saas' },
+    onError: (e) => console.error('Doow error:', e),
+  }}
+>
+  <App />
+</DoowProvider>
+```
+
+---
+
+## Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useDoow()` | Full context: `{ track, flush, isEnabled }` |
+| `useTrackEvent()` | Just the `track` function |
+| `useTrackOnMount(event)` | Track once on component mount |
+| `useTrackOnChange(value, getEvent)` | Track when value changes |
+
+---
+
+## Manual Flush
+
+```tsx
+import { useDoow } from '@doow/track-react';
+
+function LogoutButton() {
+  const { flush } = useDoow();
+
+  const handleLogout = async () => {
+    await flush();
+    logout();
+  };
+
+  return <button onClick={handleLogout}>Logout</button>;
+}
+```
+
+---
+
+## Without Provider
+
+```tsx
+import { Tracker } from '@doow/track-react';
+
+const tracker = new Tracker('dk_your_api_key', { debug: true });
+
+tracker.track({
+  metric: 'api_calls',
+  quantity: 1,
+  licenseId: 'lic_abc123',
+});
+
+// On app shutdown
+tracker.destroy();
+```
+
+---
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,64 @@
+import React$1 from 'react';
+
+interface TrackEvent {
+    metric: string;
+    quantity: number;
+    licenseId: string;
+    unit?: string;
+    attribution?: Record<string, unknown>;
+    timestamp?: string;
+}
+interface TrackerOptions {
+    endpoint?: string;
+    enabled?: boolean;
+    debug?: boolean;
+    flushAt?: number;
+    flushIntervalMs?: number;
+    maxQueueSize?: number;
+    timeoutMs?: number;
+    retryCount?: number;
+    disableCompression?: boolean;
+    attribution?: Record<string, unknown>;
+    onError?: (error: Error) => void;
+}
+interface DoowContextValue {
+    track: (event: TrackEvent) => void;
+    flush: () => Promise<void>;
+    isEnabled: boolean;
+}
+interface DoowProviderProps$1 {
+    apiKey: string;
+    options?: TrackerOptions;
+    children: React.ReactNode;
+}
+
+declare class Tracker {
+    private apiKey;
+    private options;
+    private queue;
+    private flushTimer;
+    private shutdown;
+    constructor(apiKey: string, options?: TrackerOptions);
+    private startFlushTimer;
+    private setupLifecycleHooks;
+    private log;
+    track(event: TrackEvent): void;
+    flush(): Promise<void>;
+    private flushSync;
+    private sendWithRetry;
+    private sleep;
+    destroy(): void;
+}
+
+interface DoowProviderProps {
+    apiKey: string;
+    options?: TrackerOptions;
+    children: React$1.ReactNode;
+}
+declare function DoowProvider({ apiKey, options, children }: DoowProviderProps): JSX.Element;
+declare function useDoow(): DoowContextValue;
+declare function useTrackEvent(): (event: TrackEvent) => void;
+declare function useTrackOnMount(event: TrackEvent): void;
+declare function useTrackOnChange<T>(value: T, getEvent: (value: T) => TrackEvent | null): void;
+
+export { type DoowContextValue, DoowProvider, type DoowProviderProps$1 as DoowProviderProps, type TrackEvent, Tracker, type TrackerOptions, useDoow, useTrackEvent, useTrackOnChange, useTrackOnMount };

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import React$1 from 'react';
+
+interface TrackEvent {
+    metric: string;
+    quantity: number;
+    licenseId: string;
+    unit?: string;
+    attribution?: Record<string, unknown>;
+    timestamp?: string;
+}
+interface TrackerOptions {
+    endpoint?: string;
+    enabled?: boolean;
+    debug?: boolean;
+    flushAt?: number;
+    flushIntervalMs?: number;
+    maxQueueSize?: number;
+    timeoutMs?: number;
+    retryCount?: number;
+    disableCompression?: boolean;
+    attribution?: Record<string, unknown>;
+    onError?: (error: Error) => void;
+}
+interface DoowContextValue {
+    track: (event: TrackEvent) => void;
+    flush: () => Promise<void>;
+    isEnabled: boolean;
+}
+interface DoowProviderProps$1 {
+    apiKey: string;
+    options?: TrackerOptions;
+    children: React.ReactNode;
+}
+
+declare class Tracker {
+    private apiKey;
+    private options;
+    private queue;
+    private flushTimer;
+    private shutdown;
+    constructor(apiKey: string, options?: TrackerOptions);
+    private startFlushTimer;
+    private setupLifecycleHooks;
+    private log;
+    track(event: TrackEvent): void;
+    flush(): Promise<void>;
+    private flushSync;
+    private sendWithRetry;
+    private sleep;
+    destroy(): void;
+}
+
+interface DoowProviderProps {
+    apiKey: string;
+    options?: TrackerOptions;
+    children: React$1.ReactNode;
+}
+declare function DoowProvider({ apiKey, options, children }: DoowProviderProps): JSX.Element;
+declare function useDoow(): DoowContextValue;
+declare function useTrackEvent(): (event: TrackEvent) => void;
+declare function useTrackOnMount(event: TrackEvent): void;
+declare function useTrackOnChange<T>(value: T, getEvent: (value: T) => TrackEvent | null): void;
+
+export { type DoowContextValue, DoowProvider, type DoowProviderProps$1 as DoowProviderProps, type TrackEvent, Tracker, type TrackerOptions, useDoow, useTrackEvent, useTrackOnChange, useTrackOnMount };

package/dist/index.js

@@ -0,0 +1,259 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DoowProvider: () => DoowProvider,
+  Tracker: () => Tracker,
+  useDoow: () => useDoow,
+  useTrackEvent: () => useTrackEvent,
+  useTrackOnChange: () => useTrackOnChange,
+  useTrackOnMount: () => useTrackOnMount
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/tracker.ts
+function generateUUID() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+var DEFAULT_OPTIONS = {
+  endpoint: "https://api.doow.co",
+  enabled: true,
+  debug: false,
+  flushAt: 20,
+  flushIntervalMs: 1e4,
+  maxQueueSize: 1e4,
+  timeoutMs: 1e4,
+  retryCount: 3,
+  disableCompression: false
+};
+var Tracker = class {
+  constructor(apiKey, options = {}) {
+    this.queue = [];
+    this.flushTimer = null;
+    this.shutdown = false;
+    if (!apiKey.startsWith("dk_")) {
+      throw new Error("API key must start with dk_");
+    }
+    this.apiKey = apiKey;
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+    this.startFlushTimer();
+    this.setupLifecycleHooks();
+  }
+  startFlushTimer() {
+    if (this.flushTimer) clearInterval(this.flushTimer);
+    this.flushTimer = setInterval(() => this.flush(), this.options.flushIntervalMs);
+  }
+  setupLifecycleHooks() {
+    if (typeof window === "undefined") return;
+    window.addEventListener("beforeunload", () => this.flushSync());
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "hidden") {
+        this.flushSync();
+      }
+    });
+  }
+  log(message) {
+    if (this.options.debug) {
+      console.log(`[DoowTrack] ${message}`);
+    }
+  }
+  track(event) {
+    if (!this.options.enabled || this.shutdown) return;
+    if (this.queue.length >= this.options.maxQueueSize) {
+      this.log("Queue full, dropping event");
+      return;
+    }
+    const enrichedEvent = {
+      ...event,
+      timestamp: event.timestamp || (/* @__PURE__ */ new Date()).toISOString(),
+      attribution: { ...event.attribution, ...this.options.attribution }
+    };
+    this.queue.push(enrichedEvent);
+    this.log(`Queued event: ${event.metric}`);
+    if (this.queue.length >= this.options.flushAt) {
+      this.flush();
+    }
+  }
+  async flush() {
+    if (this.queue.length === 0 || this.shutdown) return;
+    const batch = [...this.queue];
+    this.queue = [];
+    this.log(`Flushing ${batch.length} events`);
+    try {
+      await this.sendWithRetry(batch);
+    } catch (error) {
+      this.options.onError?.(error);
+      this.log(`Flush failed: ${error}`);
+    }
+  }
+  flushSync() {
+    if (this.queue.length === 0 || typeof navigator === "undefined") return;
+    const payload = JSON.stringify({
+      events: this.queue.map((e) => ({
+        event_id: generateUUID(),
+        metric: e.metric,
+        quantity: e.quantity,
+        license_id: e.licenseId,
+        unit: e.unit,
+        attribution: e.attribution,
+        timestamp: e.timestamp
+      }))
+    });
+    const blob = new Blob([payload], { type: "application/json" });
+    navigator.sendBeacon(`${this.options.endpoint}/telemetry/events`, blob);
+    this.queue = [];
+  }
+  async sendWithRetry(batch) {
+    const payload = JSON.stringify({
+      events: batch.map((e) => ({
+        event_id: generateUUID(),
+        metric: e.metric,
+        quantity: e.quantity,
+        license_id: e.licenseId,
+        unit: e.unit,
+        attribution: e.attribution,
+        timestamp: e.timestamp
+      }))
+    });
+    const headers = {
+      "Authorization": `Bearer ${this.apiKey}`,
+      "Content-Type": "application/json"
+    };
+    let body = payload;
+    if (!this.options.disableCompression && payload.length > 1024 && typeof CompressionStream !== "undefined") {
+      const stream = new Blob([payload]).stream().pipeThrough(new CompressionStream("gzip"));
+      body = await new Response(stream).blob();
+      headers["Content-Encoding"] = "gzip";
+    }
+    for (let attempt = 0; attempt <= this.options.retryCount; attempt++) {
+      try {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), this.options.timeoutMs);
+        const response = await fetch(`${this.options.endpoint}/telemetry/events`, {
+          method: "POST",
+          headers,
+          body,
+          signal: controller.signal
+        });
+        clearTimeout(timeout);
+        if (response.ok) {
+          this.log("Batch sent successfully");
+          return;
+        }
+        if (response.status === 429) {
+          const retryAfter = response.headers.get("Retry-After");
+          const delay = retryAfter ? parseInt(retryAfter, 10) * 1e3 : 100 * Math.pow(2, attempt);
+          await this.sleep(delay);
+          continue;
+        }
+        if (response.status >= 500) {
+          await this.sleep(100 * Math.pow(2, attempt));
+          continue;
+        }
+        throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+      } catch (error) {
+        if (attempt === this.options.retryCount) throw error;
+        await this.sleep(100 * Math.pow(2, attempt));
+      }
+    }
+  }
+  sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+  destroy() {
+    this.shutdown = true;
+    if (this.flushTimer) clearInterval(this.flushTimer);
+    this.flushSync();
+  }
+};
+
+// src/context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DoowContext = (0, import_react.createContext)(null);
+function DoowProvider({ apiKey, options, children }) {
+  const trackerRef = (0, import_react.useRef)(null);
+  if (!trackerRef.current) {
+    trackerRef.current = new Tracker(apiKey, options);
+  }
+  (0, import_react.useEffect)(() => {
+    return () => {
+      trackerRef.current?.destroy();
+    };
+  }, []);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      track: (event) => trackerRef.current?.track(event),
+      flush: () => trackerRef.current?.flush() ?? Promise.resolve(),
+      isEnabled: options?.enabled !== false
+    }),
+    [options?.enabled]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DoowContext.Provider, { value, children });
+}
+function useDoow() {
+  const context = (0, import_react.useContext)(DoowContext);
+  if (!context) {
+    throw new Error("useDoow must be used within a DoowProvider");
+  }
+  return context;
+}
+function useTrackEvent() {
+  const { track } = useDoow();
+  return track;
+}
+function useTrackOnMount(event) {
+  const { track } = useDoow();
+  const tracked = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!tracked.current) {
+      track(event);
+      tracked.current = true;
+    }
+  }, []);
+}
+function useTrackOnChange(value, getEvent) {
+  const { track } = useDoow();
+  const prevValue = (0, import_react.useRef)(value);
+  (0, import_react.useEffect)(() => {
+    if (value !== prevValue.current) {
+      const event = getEvent(value);
+      if (event) track(event);
+      prevValue.current = value;
+    }
+  }, [value, getEvent, track]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DoowProvider,
+  Tracker,
+  useDoow,
+  useTrackEvent,
+  useTrackOnChange,
+  useTrackOnMount
+});

package/dist/index.mjs

@@ -0,0 +1,227 @@
+// src/tracker.ts
+function generateUUID() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+var DEFAULT_OPTIONS = {
+  endpoint: "https://api.doow.co",
+  enabled: true,
+  debug: false,
+  flushAt: 20,
+  flushIntervalMs: 1e4,
+  maxQueueSize: 1e4,
+  timeoutMs: 1e4,
+  retryCount: 3,
+  disableCompression: false
+};
+var Tracker = class {
+  constructor(apiKey, options = {}) {
+    this.queue = [];
+    this.flushTimer = null;
+    this.shutdown = false;
+    if (!apiKey.startsWith("dk_")) {
+      throw new Error("API key must start with dk_");
+    }
+    this.apiKey = apiKey;
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+    this.startFlushTimer();
+    this.setupLifecycleHooks();
+  }
+  startFlushTimer() {
+    if (this.flushTimer) clearInterval(this.flushTimer);
+    this.flushTimer = setInterval(() => this.flush(), this.options.flushIntervalMs);
+  }
+  setupLifecycleHooks() {
+    if (typeof window === "undefined") return;
+    window.addEventListener("beforeunload", () => this.flushSync());
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "hidden") {
+        this.flushSync();
+      }
+    });
+  }
+  log(message) {
+    if (this.options.debug) {
+      console.log(`[DoowTrack] ${message}`);
+    }
+  }
+  track(event) {
+    if (!this.options.enabled || this.shutdown) return;
+    if (this.queue.length >= this.options.maxQueueSize) {
+      this.log("Queue full, dropping event");
+      return;
+    }
+    const enrichedEvent = {
+      ...event,
+      timestamp: event.timestamp || (/* @__PURE__ */ new Date()).toISOString(),
+      attribution: { ...event.attribution, ...this.options.attribution }
+    };
+    this.queue.push(enrichedEvent);
+    this.log(`Queued event: ${event.metric}`);
+    if (this.queue.length >= this.options.flushAt) {
+      this.flush();
+    }
+  }
+  async flush() {
+    if (this.queue.length === 0 || this.shutdown) return;
+    const batch = [...this.queue];
+    this.queue = [];
+    this.log(`Flushing ${batch.length} events`);
+    try {
+      await this.sendWithRetry(batch);
+    } catch (error) {
+      this.options.onError?.(error);
+      this.log(`Flush failed: ${error}`);
+    }
+  }
+  flushSync() {
+    if (this.queue.length === 0 || typeof navigator === "undefined") return;
+    const payload = JSON.stringify({
+      events: this.queue.map((e) => ({
+        event_id: generateUUID(),
+        metric: e.metric,
+        quantity: e.quantity,
+        license_id: e.licenseId,
+        unit: e.unit,
+        attribution: e.attribution,
+        timestamp: e.timestamp
+      }))
+    });
+    const blob = new Blob([payload], { type: "application/json" });
+    navigator.sendBeacon(`${this.options.endpoint}/telemetry/events`, blob);
+    this.queue = [];
+  }
+  async sendWithRetry(batch) {
+    const payload = JSON.stringify({
+      events: batch.map((e) => ({
+        event_id: generateUUID(),
+        metric: e.metric,
+        quantity: e.quantity,
+        license_id: e.licenseId,
+        unit: e.unit,
+        attribution: e.attribution,
+        timestamp: e.timestamp
+      }))
+    });
+    const headers = {
+      "Authorization": `Bearer ${this.apiKey}`,
+      "Content-Type": "application/json"
+    };
+    let body = payload;
+    if (!this.options.disableCompression && payload.length > 1024 && typeof CompressionStream !== "undefined") {
+      const stream = new Blob([payload]).stream().pipeThrough(new CompressionStream("gzip"));
+      body = await new Response(stream).blob();
+      headers["Content-Encoding"] = "gzip";
+    }
+    for (let attempt = 0; attempt <= this.options.retryCount; attempt++) {
+      try {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), this.options.timeoutMs);
+        const response = await fetch(`${this.options.endpoint}/telemetry/events`, {
+          method: "POST",
+          headers,
+          body,
+          signal: controller.signal
+        });
+        clearTimeout(timeout);
+        if (response.ok) {
+          this.log("Batch sent successfully");
+          return;
+        }
+        if (response.status === 429) {
+          const retryAfter = response.headers.get("Retry-After");
+          const delay = retryAfter ? parseInt(retryAfter, 10) * 1e3 : 100 * Math.pow(2, attempt);
+          await this.sleep(delay);
+          continue;
+        }
+        if (response.status >= 500) {
+          await this.sleep(100 * Math.pow(2, attempt));
+          continue;
+        }
+        throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+      } catch (error) {
+        if (attempt === this.options.retryCount) throw error;
+        await this.sleep(100 * Math.pow(2, attempt));
+      }
+    }
+  }
+  sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+  destroy() {
+    this.shutdown = true;
+    if (this.flushTimer) clearInterval(this.flushTimer);
+    this.flushSync();
+  }
+};
+
+// src/context.tsx
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var DoowContext = createContext(null);
+function DoowProvider({ apiKey, options, children }) {
+  const trackerRef = useRef(null);
+  if (!trackerRef.current) {
+    trackerRef.current = new Tracker(apiKey, options);
+  }
+  useEffect(() => {
+    return () => {
+      trackerRef.current?.destroy();
+    };
+  }, []);
+  const value = useMemo(
+    () => ({
+      track: (event) => trackerRef.current?.track(event),
+      flush: () => trackerRef.current?.flush() ?? Promise.resolve(),
+      isEnabled: options?.enabled !== false
+    }),
+    [options?.enabled]
+  );
+  return /* @__PURE__ */ jsx(DoowContext.Provider, { value, children });
+}
+function useDoow() {
+  const context = useContext(DoowContext);
+  if (!context) {
+    throw new Error("useDoow must be used within a DoowProvider");
+  }
+  return context;
+}
+function useTrackEvent() {
+  const { track } = useDoow();
+  return track;
+}
+function useTrackOnMount(event) {
+  const { track } = useDoow();
+  const tracked = useRef(false);
+  useEffect(() => {
+    if (!tracked.current) {
+      track(event);
+      tracked.current = true;
+    }
+  }, []);
+}
+function useTrackOnChange(value, getEvent) {
+  const { track } = useDoow();
+  const prevValue = useRef(value);
+  useEffect(() => {
+    if (value !== prevValue.current) {
+      const event = getEvent(value);
+      if (event) track(event);
+      prevValue.current = value;
+    }
+  }, [value, getEvent, track]);
+}
+export {
+  DoowProvider,
+  Tracker,
+  useDoow,
+  useTrackEvent,
+  useTrackOnChange,
+  useTrackOnMount
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@doow/track-react",
+  "version": "0.1.0",
+  "description": "Official React SDK for Doow usage telemetry",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "lint": "eslint src",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "doow",
+    "telemetry",
+    "usage",
+    "billing",
+    "react",
+    "hooks"
+  ],
+  "author": "Doow",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Doow-Dev/doow-track-react.git"
+  }
+}