react-event-tracking 1.0.7 → 1.0.9

package/README.md

@@ -19,6 +19,7 @@ A convenient React context for tracking analytics events.
   * [Multiple Trackers & Factory](#multiple-trackers--factory)
   * [Filtering Events](#filtering-events)
   * [Transforming Events](#transforming-events)
+  * [TypeScript Generics Support](#typescript-generics-support)
 - [Best Practices](#best-practices)
 - [Built-in Hooks](#built-in-hooks)
   * [useMountEvent](#usemountevent)
@@ -164,6 +165,23 @@ const AmpltitudeUS = TrackRoot.factory(
 );
 ```
 
+### TypeScript Generics Support
+
+`TrackProvider` supports generics for strict typing of the passed parameters.
+
+```tsx
+interface PageParams {
+  screenId: string;
+  isAuthorized: boolean;
+}
+
+const MyPage = () => (
+  <TrackProvider<PageParams> params={{ screenId: 'main', isAuthorized: true }}>
+    <Content />
+  </TrackProvider>
+);
+```
+
 ## Best Practices
 
 A common pattern is to layer data from global to specific. Here is how parameters merge:

package/dist/index.cjs

@@ -6,6 +6,19 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 const React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+function parseEventArgs(eventNameOrObject, eventParams) {
+  if (typeof eventNameOrObject === "object") {
+    return {
+      eventName: eventNameOrObject.eventName,
+      params: eventNameOrObject.params
+    };
+  }
+  return {
+    eventName: eventNameOrObject,
+    params: eventParams
+  };
+}
+
 const TrackContext = React__default.createContext(null);
 const useTracker = () => {
   const ctx = React.useContext(TrackContext);
@@ -21,15 +34,10 @@ const TrackRootComponent = ({ onEvent, children, filter, transform }) => {
   const filterRef = useFreshRef(filter);
   const transformRef = useFreshRef(transform);
   function sendEvent(eventNameOrObject, eventParams) {
-    let eventName;
-    let incomingParams;
-    if (typeof eventNameOrObject === "object") {
-      eventName = eventNameOrObject.eventName;
-      incomingParams = eventNameOrObject.params;
-    } else {
-      eventName = eventNameOrObject;
-      incomingParams = eventParams;
-    }
+    const { eventName, params: incomingParams } = parseEventArgs(
+      eventNameOrObject,
+      eventParams
+    );
     let localName = eventName;
     let localParams = incomingParams || EmptyParams;
     let shouldProcessLocal = true;
@@ -86,15 +94,10 @@ const TrackProvider = ({
   const ctx = useTracker();
   const paramsRef = useFreshRef(params);
   function sendEvent(eventNameOrObject, eventParams) {
-    let eventName;
-    let incomingParams;
-    if (typeof eventNameOrObject === "object") {
-      eventName = eventNameOrObject.eventName;
-      incomingParams = eventNameOrObject.params;
-    } else {
-      eventName = eventNameOrObject;
-      incomingParams = eventParams;
-    }
+    const { eventName, params: incomingParams } = parseEventArgs(
+      eventNameOrObject,
+      eventParams
+    );
     const currentParams = paramsRef.current;
     ctx.sendEvent(eventName, {
       ...currentParams,
@@ -111,9 +114,10 @@ function useFreshRef(data) {
   return ref;
 }
 
-function useMountEvent(eventName, params) {
+function useMountEvent(eventNameOrObject, eventParams) {
   const { sendEvent } = useTracker();
   const counterRef = React.useRef(0);
+  const { eventName, params } = parseEventArgs(eventNameOrObject, eventParams);
   React.useEffect(() => {
     if (counterRef.current > 0) {
       return;

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 
-type EventParams = Record<string, any>;
+type EventParams<T extends Record<string, any> = Record<string, any>> = T;
 interface TrackContextValue {
     sendEvent(eventName: string, params?: EventParams): void;
     sendEvent(event: EventObject): void;
@@ -26,10 +26,11 @@ type TrackRootProps = PropsWithChildren<{
 declare const TrackRoot: (({ onEvent, children, filter, transform }: TrackRootProps) => react_jsx_runtime.JSX.Element) & {
     factory: (onEvent: (eventName: string, params?: EventParams) => void, filter?: EventFilter, transform?: EventTransformer) => (props: Omit<TrackRootProps, "onEvent" | "filter" | "transform">) => react_jsx_runtime.JSX.Element;
 };
-declare const TrackProvider: ({ params, children }: PropsWithChildren<{
-    params: EventParams;
+declare const TrackProvider: <T extends Record<string, any>>({ params, children }: PropsWithChildren<{
+    params: EventParams<T>;
 }>) => react_jsx_runtime.JSX.Element;
 
 declare function useMountEvent(eventName: string, params?: EventParams): void;
+declare function useMountEvent(event: EventObject): void;
 
 export { TrackProvider, TrackRoot, useMountEvent, useTracker };

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 
-type EventParams = Record<string, any>;
+type EventParams<T extends Record<string, any> = Record<string, any>> = T;
 interface TrackContextValue {
     sendEvent(eventName: string, params?: EventParams): void;
     sendEvent(event: EventObject): void;
@@ -26,10 +26,11 @@ type TrackRootProps = PropsWithChildren<{
 declare const TrackRoot: (({ onEvent, children, filter, transform }: TrackRootProps) => react_jsx_runtime.JSX.Element) & {
     factory: (onEvent: (eventName: string, params?: EventParams) => void, filter?: EventFilter, transform?: EventTransformer) => (props: Omit<TrackRootProps, "onEvent" | "filter" | "transform">) => react_jsx_runtime.JSX.Element;
 };
-declare const TrackProvider: ({ params, children }: PropsWithChildren<{
-    params: EventParams;
+declare const TrackProvider: <T extends Record<string, any>>({ params, children }: PropsWithChildren<{
+    params: EventParams<T>;
 }>) => react_jsx_runtime.JSX.Element;
 
 declare function useMountEvent(eventName: string, params?: EventParams): void;
+declare function useMountEvent(event: EventObject): void;
 
 export { TrackProvider, TrackRoot, useMountEvent, useTracker };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 
-type EventParams = Record<string, any>;
+type EventParams<T extends Record<string, any> = Record<string, any>> = T;
 interface TrackContextValue {
     sendEvent(eventName: string, params?: EventParams): void;
     sendEvent(event: EventObject): void;
@@ -26,10 +26,11 @@ type TrackRootProps = PropsWithChildren<{
 declare const TrackRoot: (({ onEvent, children, filter, transform }: TrackRootProps) => react_jsx_runtime.JSX.Element) & {
     factory: (onEvent: (eventName: string, params?: EventParams) => void, filter?: EventFilter, transform?: EventTransformer) => (props: Omit<TrackRootProps, "onEvent" | "filter" | "transform">) => react_jsx_runtime.JSX.Element;
 };
-declare const TrackProvider: ({ params, children }: PropsWithChildren<{
-    params: EventParams;
+declare const TrackProvider: <T extends Record<string, any>>({ params, children }: PropsWithChildren<{
+    params: EventParams<T>;
 }>) => react_jsx_runtime.JSX.Element;
 
 declare function useMountEvent(eventName: string, params?: EventParams): void;
+declare function useMountEvent(event: EventObject): void;
 
 export { TrackProvider, TrackRoot, useMountEvent, useTracker };

package/dist/index.mjs

@@ -1,5 +1,18 @@
 import React, { useContext, useCallback, useMemo, useRef, useEffect } from 'react';
 
+function parseEventArgs(eventNameOrObject, eventParams) {
+  if (typeof eventNameOrObject === "object") {
+    return {
+      eventName: eventNameOrObject.eventName,
+      params: eventNameOrObject.params
+    };
+  }
+  return {
+    eventName: eventNameOrObject,
+    params: eventParams
+  };
+}
+
 const TrackContext = React.createContext(null);
 const useTracker = () => {
   const ctx = useContext(TrackContext);
@@ -15,15 +28,10 @@ const TrackRootComponent = ({ onEvent, children, filter, transform }) => {
   const filterRef = useFreshRef(filter);
   const transformRef = useFreshRef(transform);
   function sendEvent(eventNameOrObject, eventParams) {
-    let eventName;
-    let incomingParams;
-    if (typeof eventNameOrObject === "object") {
-      eventName = eventNameOrObject.eventName;
-      incomingParams = eventNameOrObject.params;
-    } else {
-      eventName = eventNameOrObject;
-      incomingParams = eventParams;
-    }
+    const { eventName, params: incomingParams } = parseEventArgs(
+      eventNameOrObject,
+      eventParams
+    );
     let localName = eventName;
     let localParams = incomingParams || EmptyParams;
     let shouldProcessLocal = true;
@@ -80,15 +88,10 @@ const TrackProvider = ({
   const ctx = useTracker();
   const paramsRef = useFreshRef(params);
   function sendEvent(eventNameOrObject, eventParams) {
-    let eventName;
-    let incomingParams;
-    if (typeof eventNameOrObject === "object") {
-      eventName = eventNameOrObject.eventName;
-      incomingParams = eventNameOrObject.params;
-    } else {
-      eventName = eventNameOrObject;
-      incomingParams = eventParams;
-    }
+    const { eventName, params: incomingParams } = parseEventArgs(
+      eventNameOrObject,
+      eventParams
+    );
     const currentParams = paramsRef.current;
     ctx.sendEvent(eventName, {
       ...currentParams,
@@ -105,9 +108,10 @@ function useFreshRef(data) {
   return ref;
 }
 
-function useMountEvent(eventName, params) {
+function useMountEvent(eventNameOrObject, eventParams) {
   const { sendEvent } = useTracker();
   const counterRef = useRef(0);
+  const { eventName, params } = parseEventArgs(eventNameOrObject, eventParams);
   useEffect(() => {
     if (counterRef.current > 0) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-event-tracking",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "files": [
     "dist"
   ],