react-event-tracking 1.0.1 → 1.0.3

package/README.md

@@ -1,4 +1,5 @@
-A convenient React context for tracking analytics events.
+# react-event-tracking [![NPM Version](https://img.shields.io/npm/v/react-event-tracking)](https://www.npmjs.com/package/react-event-tracking)
+A convenient React context for tracking analytics events. 
 
 ## Features
 
@@ -9,7 +10,7 @@ A convenient React context for tracking analytics events.
 ## Installation
 
 ```
-npm install treact-event-tracking
+npm install react-event-tracking
 ```
 ```
 yarn add react-event-tracking
@@ -19,32 +20,32 @@ yarn add react-event-tracking
 
 1. Define the root handler (e.g., send to GTM or API)
 ```tsx
-import { AnalyticsRoot } from 'react-event-tracking';
+import { TrackRoot } from 'react-event-tracking';
 
 const Main = () => (
-  <AnalyticsRoot onEvent={(name, params) => gtag('event', name, params)}>
+  <TrackRoot onEvent={(name, params) => gtag('event', name, params)}>
     <App/>
-  </AnalyticsRoot>
+  </TrackRoot>
 );
 ``` 
 2. Wrap any component with shared parameters
 ```tsx
-import { AnalyticsProvider } from 'react-event-tracking';
+import { TrackProvider } from 'react-event-tracking';
 
 const Dashboard = () => (
-  <AnalyticsProvider params={{ screen: 'dashboard' }}>
+  <TrackProvider params={{ screen: 'dashboard' }}>
     <DashboardView/>
-  </AnalyticsProvider>
+  </TrackProvider>
 );
 ```
 
 3. Send events conveniently. On button click, parameters will be merged.
 
 ```tsx
-import { useAnalytics } from 'react-event-tracking';
+import { useTracker } from 'react-event-tracking';
 
 const MyButton = () => {
-  const { sendEvent } = useAnalytics();
+  const { sendEvent } = useTracker();
 
   return (
     // event sent with parameters: { screen: 'dashboard', button_id: '123' }
@@ -55,18 +56,18 @@ const MyButton = () => {
 };
 ```
 
-## Example
+## Built-in Hooks   
 
-### Page View
+### useMountEvent   
+
+Sends an event when the component mounts.
 
 ```tsx
-export function PageView(props) {
-    const { sendEvent } = useAnalytics();
+import { useMountEvent } from 'react-event-tracking';
 
-    useEffect(() => {
-        sendEvent('page_view');
-    }, []);
+export function DashboardScreen(props) {
+    useMountEvent('page_view', { screen: 'dashboard' });
 
-    return <>{props.children}</>
+    return <div>Dashboard</div>;
 }
-```
+```

package/dist/index.cjs

@@ -6,15 +6,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 const React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const AnalyticsContext = React__default.createContext(null);
-const useAnalytics = () => {
-  const ctx = React.useContext(AnalyticsContext);
+const TrackContext = React__default.createContext(null);
+const useTracker = () => {
+  const ctx = React.useContext(TrackContext);
   if (!ctx) {
-    throw new Error("useAnalytics must be used within AnalyticsRoot");
+    throw new Error("useTracker must be used within TrackRoot");
   }
   return ctx;
 };
-const AnalyticsRoot = ({
+const TrackRoot = ({
   onEvent,
   children
 }) => {
@@ -24,13 +24,13 @@ const AnalyticsRoot = ({
     onEventRef.current(eventName, params);
   }, []);
   const value = React.useMemo(() => ({ sendEvent }), [sendEvent]);
-  return /* @__PURE__ */ React__default.createElement(AnalyticsContext.Provider, { value }, children);
+  return /* @__PURE__ */ React__default.createElement(TrackContext.Provider, { value }, children);
 };
-const AnalyticsProvider = ({
+const TrackProvider = ({
   params,
   children
 }) => {
-  const ctx = useAnalytics();
+  const ctx = useTracker();
   const paramsRef = React.useRef(params);
   paramsRef.current = params;
   const sendEvent = React.useCallback(
@@ -44,10 +44,22 @@ const AnalyticsProvider = ({
     [ctx]
   );
   const value = React.useMemo(() => ({ sendEvent }), [sendEvent]);
-  return /* @__PURE__ */ React__default.createElement(AnalyticsContext.Provider, { value }, children);
+  return /* @__PURE__ */ React__default.createElement(TrackContext.Provider, { value }, children);
 };
 
-exports.AnalyticsContext = AnalyticsContext;
-exports.AnalyticsProvider = AnalyticsProvider;
-exports.AnalyticsRoot = AnalyticsRoot;
-exports.useAnalytics = useAnalytics;
+function useMountEvent(eventName, params) {
+  const { sendEvent } = useTracker();
+  const counterRef = React.useRef(0);
+  React.useEffect(() => {
+    if (counterRef.current > 0) {
+      return;
+    }
+    counterRef.current++;
+    sendEvent(eventName, params);
+  }, []);
+}
+
+exports.TrackProvider = TrackProvider;
+exports.TrackRoot = TrackRoot;
+exports.useMountEvent = useMountEvent;
+exports.useTracker = useTracker;

package/dist/index.d.cts

@@ -1,18 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
-type AnalyticsParams = Record<string, any>;
-interface AnalyticsContextValue {
-    sendEvent: (eventName: string, params?: AnalyticsParams) => void;
-}
-declare const AnalyticsContext: React.Context<AnalyticsContextValue | null>;
-declare const useAnalytics: () => AnalyticsContextValue;
-declare const AnalyticsRoot: ({ onEvent, children }: PropsWithChildren<{
-    onEvent: (eventName: string, params?: AnalyticsParams) => void;
+type EventParams = Record<string, any>;
+type TrackContextValue = {
+    sendEvent: (eventName: string, params?: EventParams) => void;
+};
+
+declare const useTracker: () => TrackContextValue;
+declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
+    onEvent: (eventName: string, params?: EventParams) => void;
 }>) => react_jsx_runtime.JSX.Element;
-declare const AnalyticsProvider: ({ params, children }: PropsWithChildren<{
-    params: AnalyticsParams;
+declare const TrackProvider: ({ params, children }: PropsWithChildren<{
+    params: EventParams;
 }>) => react_jsx_runtime.JSX.Element;
 
-export { AnalyticsContext, AnalyticsProvider, AnalyticsRoot, useAnalytics };
-export type { AnalyticsParams };
+declare function useMountEvent(eventName: string, params?: EventParams): void;
+
+export { TrackProvider, TrackRoot, useMountEvent, useTracker };

package/dist/index.d.mts

@@ -1,18 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
-type AnalyticsParams = Record<string, any>;
-interface AnalyticsContextValue {
-    sendEvent: (eventName: string, params?: AnalyticsParams) => void;
-}
-declare const AnalyticsContext: React.Context<AnalyticsContextValue | null>;
-declare const useAnalytics: () => AnalyticsContextValue;
-declare const AnalyticsRoot: ({ onEvent, children }: PropsWithChildren<{
-    onEvent: (eventName: string, params?: AnalyticsParams) => void;
+type EventParams = Record<string, any>;
+type TrackContextValue = {
+    sendEvent: (eventName: string, params?: EventParams) => void;
+};
+
+declare const useTracker: () => TrackContextValue;
+declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
+    onEvent: (eventName: string, params?: EventParams) => void;
 }>) => react_jsx_runtime.JSX.Element;
-declare const AnalyticsProvider: ({ params, children }: PropsWithChildren<{
-    params: AnalyticsParams;
+declare const TrackProvider: ({ params, children }: PropsWithChildren<{
+    params: EventParams;
 }>) => react_jsx_runtime.JSX.Element;
 
-export { AnalyticsContext, AnalyticsProvider, AnalyticsRoot, useAnalytics };
-export type { AnalyticsParams };
+declare function useMountEvent(eventName: string, params?: EventParams): void;
+
+export { TrackProvider, TrackRoot, useMountEvent, useTracker };

package/dist/index.d.ts

@@ -1,18 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
-type AnalyticsParams = Record<string, any>;
-interface AnalyticsContextValue {
-    sendEvent: (eventName: string, params?: AnalyticsParams) => void;
-}
-declare const AnalyticsContext: React.Context<AnalyticsContextValue | null>;
-declare const useAnalytics: () => AnalyticsContextValue;
-declare const AnalyticsRoot: ({ onEvent, children }: PropsWithChildren<{
-    onEvent: (eventName: string, params?: AnalyticsParams) => void;
+type EventParams = Record<string, any>;
+type TrackContextValue = {
+    sendEvent: (eventName: string, params?: EventParams) => void;
+};
+
+declare const useTracker: () => TrackContextValue;
+declare const TrackRoot: ({ onEvent, children }: PropsWithChildren<{
+    onEvent: (eventName: string, params?: EventParams) => void;
 }>) => react_jsx_runtime.JSX.Element;
-declare const AnalyticsProvider: ({ params, children }: PropsWithChildren<{
-    params: AnalyticsParams;
+declare const TrackProvider: ({ params, children }: PropsWithChildren<{
+    params: EventParams;
 }>) => react_jsx_runtime.JSX.Element;
 
-export { AnalyticsContext, AnalyticsProvider, AnalyticsRoot, useAnalytics };
-export type { AnalyticsParams };
+declare function useMountEvent(eventName: string, params?: EventParams): void;
+
+export { TrackProvider, TrackRoot, useMountEvent, useTracker };

package/dist/index.mjs

@@ -1,14 +1,14 @@
-import React, { useContext, useRef, useCallback, useMemo } from 'react';
+import React, { useContext, useRef, useCallback, useMemo, useEffect } from 'react';
 
-const AnalyticsContext = React.createContext(null);
-const useAnalytics = () => {
-  const ctx = useContext(AnalyticsContext);
+const TrackContext = React.createContext(null);
+const useTracker = () => {
+  const ctx = useContext(TrackContext);
   if (!ctx) {
-    throw new Error("useAnalytics must be used within AnalyticsRoot");
+    throw new Error("useTracker must be used within TrackRoot");
   }
   return ctx;
 };
-const AnalyticsRoot = ({
+const TrackRoot = ({
   onEvent,
   children
 }) => {
@@ -18,13 +18,13 @@ const AnalyticsRoot = ({
     onEventRef.current(eventName, params);
   }, []);
   const value = useMemo(() => ({ sendEvent }), [sendEvent]);
-  return /* @__PURE__ */ React.createElement(AnalyticsContext.Provider, { value }, children);
+  return /* @__PURE__ */ React.createElement(TrackContext.Provider, { value }, children);
 };
-const AnalyticsProvider = ({
+const TrackProvider = ({
   params,
   children
 }) => {
-  const ctx = useAnalytics();
+  const ctx = useTracker();
   const paramsRef = useRef(params);
   paramsRef.current = params;
   const sendEvent = useCallback(
@@ -38,7 +38,19 @@ const AnalyticsProvider = ({
     [ctx]
   );
   const value = useMemo(() => ({ sendEvent }), [sendEvent]);
-  return /* @__PURE__ */ React.createElement(AnalyticsContext.Provider, { value }, children);
+  return /* @__PURE__ */ React.createElement(TrackContext.Provider, { value }, children);
 };
 
-export { AnalyticsContext, AnalyticsProvider, AnalyticsRoot, useAnalytics };
+function useMountEvent(eventName, params) {
+  const { sendEvent } = useTracker();
+  const counterRef = useRef(0);
+  useEffect(() => {
+    if (counterRef.current > 0) {
+      return;
+    }
+    counterRef.current++;
+    sendEvent(eventName, params);
+  }, []);
+}
+
+export { TrackProvider, TrackRoot, useMountEvent, useTracker };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-event-tracking",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "files": [
     "dist"
   ],
+  "repository": "git@github.com:zeeeeby/react-event-tracking.git",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,7 +14,8 @@
   },
   "scripts": {
     "build": "tsc --noEmit && unbuild",
-    "test": "vitest"
+    "test": "vitest",
+    "toc": "npx markdown-toc README.md -i"
   },
   "author": "",
   "license": "ISC",