@productbet/tracker-react 0.1.0

package/dist/hooks.d.ts

@@ -0,0 +1,5 @@
+import type { ProductBetTracker } from "@productbet/tracker-core";
+export declare function useTracker(): ProductBetTracker | null;
+export declare function useIdentify(userId: string | null | undefined, attributes?: Record<string, unknown>): void;
+export declare function useTrackEvent(): (eventName: string, properties?: Record<string, unknown>) => void;
+export declare function usePageView(pathname?: string): void;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ProductBetProvider, ProductBetContext } from "./provider";
+export type { ProductBetProviderProps } from "./provider";
+export { useTracker, useIdentify, useTrackEvent, usePageView } from "./hooks";
+export type { TrackerOptions, AutoTrackingOptions, RedactionOptions, } from "@productbet/tracker-core";

package/dist/index.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var trackerCore = require('@productbet/tracker-core');
+
+const ProductBetContext = react.createContext(null);
+function ProductBetProvider({ apiKey, children, ...options }) {
+    const trackerRef = react.useRef(null);
+    if (!trackerRef.current && typeof window !== "undefined") {
+        trackerRef.current = trackerCore.ProductBetTracker.init(apiKey, options);
+    }
+    react.useEffect(() => {
+        const tracker = trackerRef.current;
+        if (!tracker)
+            return;
+        tracker.start();
+        return () => {
+            tracker.stop();
+        };
+    }, []);
+    return (jsxRuntime.jsx(ProductBetContext.Provider, { value: trackerRef.current, children: children }));
+}
+
+function useTracker() {
+    return react.useContext(ProductBetContext);
+}
+function useIdentify(userId, attributes) {
+    const tracker = useTracker();
+    const prevUserIdRef = react.useRef(null);
+    react.useEffect(() => {
+        if (!tracker || !userId)
+            return;
+        if (userId === prevUserIdRef.current)
+            return;
+        prevUserIdRef.current = userId;
+        tracker.identify(userId, attributes);
+    }, [tracker, userId, attributes]);
+}
+function useTrackEvent() {
+    const tracker = useTracker();
+    return (eventName, properties) => {
+        tracker?.track(eventName, properties);
+    };
+}
+function usePageView(pathname) {
+    const tracker = useTracker();
+    const prevPathRef = react.useRef(undefined);
+    react.useEffect(() => {
+        if (!tracker || !pathname)
+            return;
+        if (pathname === prevPathRef.current)
+            return;
+        prevPathRef.current = pathname;
+        tracker.track("$page_view", {
+            path: pathname,
+            url: typeof window !== "undefined" ? window.location.href : undefined,
+            title: typeof document !== "undefined" ? document.title : undefined,
+        });
+    }, [tracker, pathname]);
+}
+
+exports.ProductBetContext = ProductBetContext;
+exports.ProductBetProvider = ProductBetProvider;
+exports.useIdentify = useIdentify;
+exports.usePageView = usePageView;
+exports.useTrackEvent = useTrackEvent;
+exports.useTracker = useTracker;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import {\n    createContext,\n    useEffect,\n    useRef,\n    type ReactNode,\n} from \"react\"\nimport {\n    ProductBetTracker,\n    type TrackerOptions,\n} from \"@productbet/tracker-core\"\n\nexport const ProductBetContext = createContext<ProductBetTracker | null>(null)\n\nexport interface ProductBetProviderProps extends TrackerOptions {\n    apiKey: string\n    children: ReactNode\n}\n\nexport function ProductBetProvider({\n    apiKey,\n    children,\n    ...options\n}: ProductBetProviderProps) {\n    const trackerRef = useRef<ProductBetTracker | null>(null)\n\n    if (!trackerRef.current && typeof window !== \"undefined\") {\n        trackerRef.current = ProductBetTracker.init(apiKey, options)\n    }\n\n    useEffect(() => {\n        const tracker = trackerRef.current\n        if (!tracker) return\n\n        tracker.start()\n\n        return () => {\n            tracker.stop()\n        }\n    }, [])\n\n    return (\n        <ProductBetContext.Provider value={trackerRef.current}>\n            {children}\n        </ProductBetContext.Provider>\n    )\n}\n","import { useContext, useEffect, useRef } from \"react\"\nimport { ProductBetContext } from \"./provider\"\nimport type { ProductBetTracker } from \"@productbet/tracker-core\"\n\nexport function useTracker(): ProductBetTracker | null {\n    return useContext(ProductBetContext)\n}\n\nexport function useIdentify(\n    userId: string | null | undefined,\n    attributes?: Record<string, unknown>,\n): void {\n    const tracker = useTracker()\n    const prevUserIdRef = useRef<string | null | undefined>(null)\n\n    useEffect(() => {\n        if (!tracker || !userId) return\n        if (userId === prevUserIdRef.current) return\n\n        prevUserIdRef.current = userId\n        tracker.identify(userId, attributes)\n    }, [tracker, userId, attributes])\n}\n\nexport function useTrackEvent(): (\n    eventName: string,\n    properties?: Record<string, unknown>,\n) => void {\n    const tracker = useTracker()\n\n    return (eventName: string, properties?: Record<string, unknown>) => {\n        tracker?.track(eventName, properties)\n    }\n}\n\nexport function usePageView(pathname?: string): void {\n    const tracker = useTracker()\n    const prevPathRef = useRef<string | undefined>(undefined)\n\n    useEffect(() => {\n        if (!tracker || !pathname) return\n        if (pathname === prevPathRef.current) return\n\n        prevPathRef.current = pathname\n        tracker.track(\"$page_view\", {\n            path: pathname,\n            url: typeof window !== \"undefined\" ? window.location.href : undefined,\n            title: typeof document !== \"undefined\" ? document.title : undefined,\n        })\n    }, [tracker, pathname])\n}\n"],"names":["createContext","useRef","ProductBetTracker","useEffect","_jsx","useContext"],"mappings":";;;;;;MAWa,iBAAiB,GAAGA,mBAAa,CAA2B,IAAI;AAOvE,SAAU,kBAAkB,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,GAAG,OAAO,EACY,EAAA;AACtB,IAAA,MAAM,UAAU,GAAGC,YAAM,CAA2B,IAAI,CAAC;IAEzD,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACtD,UAAU,CAAC,OAAO,GAAGC,6BAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;IAChE;IAEAC,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO;AAClC,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,OAAO,CAAC,KAAK,EAAE;AAEf,QAAA,OAAO,MAAK;YACR,OAAO,CAAC,IAAI,EAAE;AAClB,QAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACIC,cAAA,CAAC,iBAAiB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAChD,QAAQ,EAAA,CACgB;AAErC;;SCzCgB,UAAU,GAAA;AACtB,IAAA,OAAOC,gBAAU,CAAC,iBAAiB,CAAC;AACxC;AAEM,SAAU,WAAW,CACvB,MAAiC,EACjC,UAAoC,EAAA;AAEpC,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAC5B,IAAA,MAAM,aAAa,GAAGJ,YAAM,CAA4B,IAAI,CAAC;IAE7DE,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM;YAAE;AACzB,QAAA,IAAI,MAAM,KAAK,aAAa,CAAC,OAAO;YAAE;AAEtC,QAAA,aAAa,CAAC,OAAO,GAAG,MAAM;AAC9B,QAAA,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;AACrC;SAEgB,aAAa,GAAA;AAIzB,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAE5B,IAAA,OAAO,CAAC,SAAiB,EAAE,UAAoC,KAAI;AAC/D,QAAA,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC;AACzC,IAAA,CAAC;AACL;AAEM,SAAU,WAAW,CAAC,QAAiB,EAAA;AACzC,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAC5B,IAAA,MAAM,WAAW,GAAGF,YAAM,CAAqB,SAAS,CAAC;IAEzDE,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ;YAAE;AAC3B,QAAA,IAAI,QAAQ,KAAK,WAAW,CAAC,OAAO;YAAE;AAEtC,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAC9B,QAAA,OAAO,CAAC,KAAK,CAAC,YAAY,EAAE;AACxB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,GAAG,EAAE,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,SAAS;AACrE,YAAA,KAAK,EAAE,OAAO,QAAQ,KAAK,WAAW,GAAG,QAAQ,CAAC,KAAK,GAAG,SAAS;AACtE,SAAA,CAAC;AACN,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAC3B;;;;;;;;;"}

package/dist/index.mjs

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef, useEffect, useContext } from 'react';
+import { ProductBetTracker } from '@productbet/tracker-core';
+
+const ProductBetContext = createContext(null);
+function ProductBetProvider({ apiKey, children, ...options }) {
+    const trackerRef = useRef(null);
+    if (!trackerRef.current && typeof window !== "undefined") {
+        trackerRef.current = ProductBetTracker.init(apiKey, options);
+    }
+    useEffect(() => {
+        const tracker = trackerRef.current;
+        if (!tracker)
+            return;
+        tracker.start();
+        return () => {
+            tracker.stop();
+        };
+    }, []);
+    return (jsx(ProductBetContext.Provider, { value: trackerRef.current, children: children }));
+}
+
+function useTracker() {
+    return useContext(ProductBetContext);
+}
+function useIdentify(userId, attributes) {
+    const tracker = useTracker();
+    const prevUserIdRef = useRef(null);
+    useEffect(() => {
+        if (!tracker || !userId)
+            return;
+        if (userId === prevUserIdRef.current)
+            return;
+        prevUserIdRef.current = userId;
+        tracker.identify(userId, attributes);
+    }, [tracker, userId, attributes]);
+}
+function useTrackEvent() {
+    const tracker = useTracker();
+    return (eventName, properties) => {
+        tracker?.track(eventName, properties);
+    };
+}
+function usePageView(pathname) {
+    const tracker = useTracker();
+    const prevPathRef = useRef(undefined);
+    useEffect(() => {
+        if (!tracker || !pathname)
+            return;
+        if (pathname === prevPathRef.current)
+            return;
+        prevPathRef.current = pathname;
+        tracker.track("$page_view", {
+            path: pathname,
+            url: typeof window !== "undefined" ? window.location.href : undefined,
+            title: typeof document !== "undefined" ? document.title : undefined,
+        });
+    }, [tracker, pathname]);
+}
+
+export { ProductBetContext, ProductBetProvider, useIdentify, usePageView, useTrackEvent, useTracker };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/provider.tsx","../src/hooks.ts"],"sourcesContent":["import {\n    createContext,\n    useEffect,\n    useRef,\n    type ReactNode,\n} from \"react\"\nimport {\n    ProductBetTracker,\n    type TrackerOptions,\n} from \"@productbet/tracker-core\"\n\nexport const ProductBetContext = createContext<ProductBetTracker | null>(null)\n\nexport interface ProductBetProviderProps extends TrackerOptions {\n    apiKey: string\n    children: ReactNode\n}\n\nexport function ProductBetProvider({\n    apiKey,\n    children,\n    ...options\n}: ProductBetProviderProps) {\n    const trackerRef = useRef<ProductBetTracker | null>(null)\n\n    if (!trackerRef.current && typeof window !== \"undefined\") {\n        trackerRef.current = ProductBetTracker.init(apiKey, options)\n    }\n\n    useEffect(() => {\n        const tracker = trackerRef.current\n        if (!tracker) return\n\n        tracker.start()\n\n        return () => {\n            tracker.stop()\n        }\n    }, [])\n\n    return (\n        <ProductBetContext.Provider value={trackerRef.current}>\n            {children}\n        </ProductBetContext.Provider>\n    )\n}\n","import { useContext, useEffect, useRef } from \"react\"\nimport { ProductBetContext } from \"./provider\"\nimport type { ProductBetTracker } from \"@productbet/tracker-core\"\n\nexport function useTracker(): ProductBetTracker | null {\n    return useContext(ProductBetContext)\n}\n\nexport function useIdentify(\n    userId: string | null | undefined,\n    attributes?: Record<string, unknown>,\n): void {\n    const tracker = useTracker()\n    const prevUserIdRef = useRef<string | null | undefined>(null)\n\n    useEffect(() => {\n        if (!tracker || !userId) return\n        if (userId === prevUserIdRef.current) return\n\n        prevUserIdRef.current = userId\n        tracker.identify(userId, attributes)\n    }, [tracker, userId, attributes])\n}\n\nexport function useTrackEvent(): (\n    eventName: string,\n    properties?: Record<string, unknown>,\n) => void {\n    const tracker = useTracker()\n\n    return (eventName: string, properties?: Record<string, unknown>) => {\n        tracker?.track(eventName, properties)\n    }\n}\n\nexport function usePageView(pathname?: string): void {\n    const tracker = useTracker()\n    const prevPathRef = useRef<string | undefined>(undefined)\n\n    useEffect(() => {\n        if (!tracker || !pathname) return\n        if (pathname === prevPathRef.current) return\n\n        prevPathRef.current = pathname\n        tracker.track(\"$page_view\", {\n            path: pathname,\n            url: typeof window !== \"undefined\" ? window.location.href : undefined,\n            title: typeof document !== \"undefined\" ? document.title : undefined,\n        })\n    }, [tracker, pathname])\n}\n"],"names":["_jsx"],"mappings":";;;;MAWa,iBAAiB,GAAG,aAAa,CAA2B,IAAI;AAOvE,SAAU,kBAAkB,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,GAAG,OAAO,EACY,EAAA;AACtB,IAAA,MAAM,UAAU,GAAG,MAAM,CAA2B,IAAI,CAAC;IAEzD,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACtD,UAAU,CAAC,OAAO,GAAG,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;IAChE;IAEA,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO;AAClC,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,OAAO,CAAC,KAAK,EAAE;AAEf,QAAA,OAAO,MAAK;YACR,OAAO,CAAC,IAAI,EAAE;AAClB,QAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACIA,GAAA,CAAC,iBAAiB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAChD,QAAQ,EAAA,CACgB;AAErC;;SCzCgB,UAAU,GAAA;AACtB,IAAA,OAAO,UAAU,CAAC,iBAAiB,CAAC;AACxC;AAEM,SAAU,WAAW,CACvB,MAAiC,EACjC,UAAoC,EAAA;AAEpC,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAC5B,IAAA,MAAM,aAAa,GAAG,MAAM,CAA4B,IAAI,CAAC;IAE7D,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM;YAAE;AACzB,QAAA,IAAI,MAAM,KAAK,aAAa,CAAC,OAAO;YAAE;AAEtC,QAAA,aAAa,CAAC,OAAO,GAAG,MAAM;AAC9B,QAAA,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;AACrC;SAEgB,aAAa,GAAA;AAIzB,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAE5B,IAAA,OAAO,CAAC,SAAiB,EAAE,UAAoC,KAAI;AAC/D,QAAA,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC;AACzC,IAAA,CAAC;AACL;AAEM,SAAU,WAAW,CAAC,QAAiB,EAAA;AACzC,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAC5B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAqB,SAAS,CAAC;IAEzD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ;YAAE;AAC3B,QAAA,IAAI,QAAQ,KAAK,WAAW,CAAC,OAAO;YAAE;AAEtC,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAC9B,QAAA,OAAO,CAAC,KAAK,CAAC,YAAY,EAAE;AACxB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,GAAG,EAAE,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,SAAS;AACrE,YAAA,KAAK,EAAE,OAAO,QAAQ,KAAK,WAAW,GAAG,QAAQ,CAAC,KAAK,GAAG,SAAS;AACtE,SAAA,CAAC;AACN,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAC3B;;;;"}

package/dist/provider.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import { ProductBetTracker, type TrackerOptions } from "@productbet/tracker-core";
+export declare const ProductBetContext: import("react").Context<ProductBetTracker | null>;
+export interface ProductBetProviderProps extends TrackerOptions {
+    apiKey: string;
+    children: ReactNode;
+}
+export declare function ProductBetProvider({ apiKey, children, ...options }: ProductBetProviderProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@productbet/tracker-react",
+  "version": "0.1.0",
+  "description": "React integration for ProductBet behavioral analytics SDK",
+  "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"
+  ],
+  "dependencies": {
+    "@productbet/tracker-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.0.0",
+    "@types/react": "^19.0.0",
+    "rimraf": "^6.0.0",
+    "rollup": "^4.0.0",
+    "tslib": "^2.8.0",
+    "typescript": "^5.8.0"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/productbet/productbet",
+    "directory": "packages/tracker-react"
+  },
+  "keywords": [
+    "analytics",
+    "react",
+    "session-recording",
+    "productbet"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "dev": "rollup -c rollup.config.mjs --watch",
+    "clean": "rimraf dist"
+  }
+}