react-event-tracker - npm Package Compare versions

Comparing version 3.2.1 to 4.0.0

dist/index.js

@@ -6,37 +6,27 @@ "use strict";
 });
-Object.defineProperty(exports, "withSiteTracking", {
+Object.defineProperty(exports, "useSiteTracking", {
   enumerable: true,
   get: function get() {
-    return _withSiteTracking["default"];
+    return _useSiteTracking["default"];
   }
 });
-Object.defineProperty(exports, "WithSiteTracking", {
+Object.defineProperty(exports, "usePageTracking", {
   enumerable: true,
   get: function get() {
-    return _withSiteTracking.WithSiteTracking;
+    return _usePageTracking["default"];
   }
 });
-Object.defineProperty(exports, "withPageTracking", {
+Object.defineProperty(exports, "useEventTracking", {
   enumerable: true,
   get: function get() {
-    return _withPageTracking["default"];
+    return _useEventTracking["default"];
   }
 });
-Object.defineProperty(exports, "withEventTracking", {
-  enumerable: true,
-  get: function get() {
-    return _withEventTracking["default"];
-  }
-});
 
-var _withSiteTracking = _interopRequireWildcard(require("./withSiteTracking"));
+var _useSiteTracking = _interopRequireDefault(require("./useSiteTracking"));
 
-var _withPageTracking = _interopRequireDefault(require("./withPageTracking"));
+var _usePageTracking = _interopRequireDefault(require("./usePageTracking"));
 
-var _withEventTracking = _interopRequireDefault(require("./withEventTracking"));
+var _useEventTracking = _interopRequireDefault(require("./useEventTracking"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package.json

 {
   "name": "react-event-tracker",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "description": "Easily track events in your React application",
   "main": "dist/index.js",
   "scripts": {
-    "prettier": "prettier --write \"**/*.{js,json,md}\"",
+    "prettier": "prettier --write \"**/*.{js,json}\"",
     "lint": "eslint --max-warnings 0 \"**/*.js\"",
     "test": "echo \"Coming soon!\"",
     "transpile": "rimraf dist && babel src -d dist --ignore \"src/**/*.test.js\"",
-    "prepublish": "npm run transpile"
+    "prepublish": "npm run transpile",
+    "postinstall": "is-ci || husky install"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run prettier && npm run lint"
-    }
-  },
   "peerDependencies": {
@@ -22,13 +18,15 @@ "react": "^16.8.0"
   "devDependencies": {
-    "@babel/cli": "^7.6.0",
-    "@babel/core": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.4.0",
-    "eslint-plugin-react": "^7.14.3",
-    "husky": "^3.0.5",
-    "prettier": "^1.18.2",
-    "react": "^16.9.0",
-    "rimraf": "^3.0.0"
+    "@babel/cli": "7.12.10",
+    "@babel/core": "7.12.10",
+    "@babel/preset-env": "7.12.11",
+    "@babel/preset-react": "7.12.10",
+    "babel-eslint": "10.1.0",
+    "eslint": "7.18.0",
+    "eslint-plugin-react": "7.22.0",
+    "husky": "5.0.6",
+    "is-ci": "2.0.0",
+    "prettier": "2.2.1",
+    "pretty-quick": "3.1.0",
+    "react": "17.0.1",
+    "rimraf": "3.0.2"
   },
@@ -35,0 +33,0 @@ "keywords": [

README.md

@@ -14,36 +14,28 @@ # react-event-tracker
 ```js
-import { withSiteTracking } from "react-event-tracker";
+import { useSiteTracking } from "react-event-tracker";
 
-function App() {
-  // Your root level component
-}
-
 const trackingConfig = {
-  // `siteData` can be anything
   siteData: {
-    site: "my site"
+    site: "my site",
   },
-  inject: {
-    // `trackEvent` will be injected as a prop.
-    // You can choose any prop name.
+  pageTracking: {
+    onPageLoad: ({ siteData, pageData }) => {
+      // Fire a page view to your analytics solution.
+    },
+  },
+  eventTracking: {
     trackEvent: ({ siteData, pageData, eventData }) => {
-      // Do whatever you want with the data.
-      // For example, call your analytics API.
-    }
-  }
+      // Fire a click event to your analytics solution.
+    },
+  },
 };
 
-export default withSiteTracking(App, trackingConfig);
-```
+function App() {
+  const { SiteTracking } = useSiteTracking(trackingConfig);
 
-or, you can wrap your root level component with `WithSiteTracking`:
-
-```js
-import { WithSiteTracking } from "react-event-tracker";
-
-function App() {
+  // Wrap your app with SiteTracking
   return (
-    <WithSiteTracking {...trackingConfig}>
-      {/* Your root level component */}
-    </WithSiteTracking>
+    <SiteTracking>
+      ...
+    </SiteTracking>
   );
@@ -56,18 +48,17 @@ }
 ```js
-import { withPageTracking } from "react-event-tracker";
+import { usePageTracking } from "react-event-tracker";
 
-function ProductPage() {
+const pageData = {
+  page: "my_product",
+};
+
+function ProductPage(props) {
+  const { PageTracking } = usePageTracking(pageData);
+
   return (
-    ...
-    <ProductPageContent />
-    ...
+    <PageTracking>
+      <ProductPageContent {...props} />
+    </PageTracking>
   );
 }
-
-// `pageData` can be anything
-const pageData = {
-  page: "my_product"
-};
-
-export default withPageTracking(ProductPage, { pageData });
 ```
@@ -78,6 +69,7 @@
 ```js
-import { withEventTracking } from "react-event-tracker";
+import { useEventTracking } from "react-event-tracker";
 
-// The `trackEvent` prop is injected by `withEventTracking` according to the `trackingConfig` above.
-function ProductPageContent({ trackEvent }) {
+function ProductPageContent() {
+  const { trackEvent } = useEventTracking();
+
   return (
@@ -90,3 +82,3 @@ ...
 
-          You call `trackEvent` (provided by `react-event-tracker`) with `eventData` (can be anything).
+          You call `trackEvent` (provided by `react-event-tracker`) with `eventData`.
 
@@ -103,4 +95,2 @@ In return, `react-event-tracker` will call your own `trackEvent` (that you defined in the `trackingConfig` above) with `siteData`, `pageData`, and `eventData`.
 }
-
-export default withEventTracking(ProductPageContent);
 ```
@@ -110,18 +100,4 @@
 
-Add an `onPageLoad` function to the `trackingConfig`:
+If you add `onPageLoad` to `trackingConfig.pageTracking`, `react-event-tracker` will call it whenever your page is first mounted. Your page is the component that calls `usePageTracking`.
 
-```js
-const trackingConfig = {
-  onPageLoad: ({ siteData, pageData, eventData }) => {
-      // Do whatever you want with the data.
-      // For example, call your analytics API.
-    }
-  }
-};
-```
-
-`react-event-tracker` will call the `onPageLoad` function once your pages (i.e. components wrapped with `withPageTracking`) finish rendering.
-
-You could, for example, inspect cookies or `localStorage` here, build your data layer, and then call your analytics API.
-
 ## Writing to `localStorage`
@@ -131,3 +107,3 @@
 
-For example, say you are tracking page views of the Application page. It could be very useful to know how users have arrived to the Aplication page. Did they click the "Apply" link in the header on the Home page? Maybe the "Apply" link in the footer? Or, maybe, they landed on the Application page after clicking "Apply" on your Product Page?
+For example, say you are tracking page views of the Application page. It could be very useful to know how users have arrived to the Application page. Did they click the "Apply" link in the header on the Home page? Maybe the "Apply" link in the footer? Or, maybe, they landed on the Application page after clicking "Apply" on your Product Page?
 
@@ -138,7 +114,10 @@ One way to track this, is to write to `localStorage` when users click the "Apply" link. Then, read from `localStorage` in the `onPageLoad` function.
 const trackingConfig = {
-  storeTrafficSource: ({ pageData, eventData }) => {
-    localStorage.setItem(
-      "traffic_source",
-      `${pageData.page}:${eventData.source}`
-    );
+  ...
+  eventTracking: {
+    storeTrafficSource: ({ pageData, eventData }) => {
+      localStorage.setItem(
+        "traffic_source",
+        `${pageData.page}:${eventData.source}`
+      );
+    }
   }
@@ -149,6 +128,7 @@ };
 ```js
-import { withEventTracking } from "react-event-tracker";
+import { useEventTracking } from "react-event-tracker";
 
-// The `storeTrafficSource` prop is injected by `withEventTracking` according to the `trackingConfig` above.
-function ProductPageContent({ storeTrafficSource }) {
+function ProductPageContent() {
+  const { storeTrafficSource } = useEventTracking();
+
   return (
@@ -173,4 +153,2 @@ ...
 }
-
-export default withEventTracking(ProductPageContent);
 ```
@@ -182,7 +160,7 @@
 
-Add a `getQueryString` function to `inject`, e.g.:
+Add a `getQueryString` function to `eventTracking`, e.g.:
 
 ```js
 const trackingConfig = {
-  inject: {
+  eventTracking: {
     getQueryString: ({ siteData, pageData, eventData }) => {
@@ -192,20 +170,21 @@ const dataLayer = {
         ...pageData,
-        ...eventData
+        ...eventData,
       };
 
       return Object.keys(dataLayer)
-        .map(key => `${key}=${encodeURIComponent(dataLayer[key])}`)
+        .map((key) => `${key}=${encodeURIComponent(dataLayer[key])}`)
         .join("&");
-    }
-  }
+    },
+  },
 };
 ```
 
-Then, call `getQueryString` that is injected as a prop:
+Then, call `getQueryString` that is given to you by `useEventTracking`.
 
 ```js
-import { withEventTracking } from "react-event-tracker";
+import { useEventTracking } from "react-event-tracker";
 
-// The `getQueryString` prop is injected by `withEventTracking` according to the `trackingConfig` above.
-function ProductPageContent({ getQueryString }) {
+function ProductPageContent() {
+  const { getQueryString } = useEventTracking();
+
   return (
@@ -228,4 +207,2 @@ ...
 }
-
-export default withEventTracking(ProductPageContent);
 ```
@@ -232,0 +209,0 @@

New alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

14066

-10.27%

Dev dependency count

13

18.18%

Lines of code

128

-17.42%

Number of lines in readme file

200

-10.31%

Number of high supply chain risk alerts

1

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes