react-use-hotjar - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+### [1.0.5](https://github.com/olavoparno/react-use-hotjar/compare/v1.0.4...v1.0.5) (2020-08-11)
+
 ### [1.0.4](https://github.com/olavoparno/react-use-hotjar/compare/v1.0.3...v1.0.4) (2020-08-11)
@@ -7,0 +9,0 @@

dist/index.d.ts

 declare type TUseHotjar = {
-    initHotjar: (hotjarId: string, hotjarVersion: string, shouldLog?: boolean) => boolean;
-    identityHotjar: (userId: string, userInfo: string, shouldLog?: boolean) => boolean;
+    initHotjar: (hotjarId: string, hotjarVersion: string, logCallback?: () => void) => boolean;
+    identityHotjar: (userId: string, userInfo: string, logCallback?: () => void) => boolean;
 };
 export declare function useHotjar(): TUseHotjar;
 export {};

dist/index.es.js

@@ -1,6 +0,5 @@
-import { useMemo, useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 function useAppendHeadScript() {
-    var appendHeadScript = useCallback(function (_a) {
-        var scriptText = _a.scriptText, scriptId = _a.scriptId;
+    var appendHeadScript = useCallback(function (scriptText, scriptId) {
         try {
@@ -15,3 +14,3 @@ var existentScript = document.getElementById(scriptId);
         }
-        catch (_b) {
+        catch (_a) {
             return false;
@@ -25,23 +24,15 @@ }
     var appendHeadScript = useAppendHeadScript().appendHeadScript;
-    var initHotjar = useCallback(function (hotjarId, hotjarVersion, shouldLog) {
-        if (shouldLog === void 0) { shouldLog = true; }
+    var initHotjar = useCallback(function (hotjarId, hotjarVersion, loggerFunction) {
         var hotjarScript = "(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:" + hotjarId + ",hjsv:" + hotjarVersion + "};a=o.getElementsByTagName('head')[0];r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');";
-        var isHotjarAppended = appendHeadScript({
-            scriptText: hotjarScript,
-            scriptId: 'hotjar-script',
-        });
-        if (shouldLog)
-            console.info("Hotjar ready: " + isHotjarAppended);
+        var isHotjarAppended = appendHeadScript(hotjarScript, 'hotjar-script');
+        if (loggerFunction && typeof loggerFunction === 'function')
+            loggerFunction("Hotjar ready: " + isHotjarAppended);
         return isHotjarAppended;
     }, [appendHeadScript]);
-    var identityHotjar = useCallback(function (userId, userInfo, shouldLog) {
-        if (shouldLog === void 0) { shouldLog = true; }
+    var identityHotjar = useCallback(function (userId, userInfo, loggerFunction) {
         try {
             var hotjarIdentityScript = "var userId=\"" + userId + "\" || null;window.hj(\"identify\",userId," + userInfo + ");";
-            var isIdentified = appendHeadScript({
-                scriptText: hotjarIdentityScript,
-                scriptId: 'identity-script',
-            });
-            if (shouldLog)
-                console.info("Hotjar identified: " + isIdentified);
+            var isIdentified = appendHeadScript(hotjarIdentityScript, 'identity-script');
+            if (loggerFunction && typeof loggerFunction === 'function')
+                loggerFunction("Hotjar identified: " + isIdentified);
             return isIdentified;
@@ -55,4 +46,4 @@ }
     return useMemo(function () { return ({ initHotjar: initHotjar, identityHotjar: identityHotjar }); }, [
+        initHotjar,
         identityHotjar,
-        initHotjar,
     ]);
@@ -59,0 +50,0 @@ }

dist/index.js

@@ -8,4 +8,3 @@ 'use strict';
 function useAppendHeadScript() {
-    var appendHeadScript = React.useCallback(function (_a) {
-        var scriptText = _a.scriptText, scriptId = _a.scriptId;
+    var appendHeadScript = React.useCallback(function (scriptText, scriptId) {
         try {
@@ -20,3 +19,3 @@ var existentScript = document.getElementById(scriptId);
         }
-        catch (_b) {
+        catch (_a) {
             return false;
@@ -30,23 +29,15 @@ }
     var appendHeadScript = useAppendHeadScript().appendHeadScript;
-    var initHotjar = React.useCallback(function (hotjarId, hotjarVersion, shouldLog) {
-        if (shouldLog === void 0) { shouldLog = true; }
+    var initHotjar = React.useCallback(function (hotjarId, hotjarVersion, loggerFunction) {
         var hotjarScript = "(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:" + hotjarId + ",hjsv:" + hotjarVersion + "};a=o.getElementsByTagName('head')[0];r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');";
-        var isHotjarAppended = appendHeadScript({
-            scriptText: hotjarScript,
-            scriptId: 'hotjar-script',
-        });
-        if (shouldLog)
-            console.info("Hotjar ready: " + isHotjarAppended);
+        var isHotjarAppended = appendHeadScript(hotjarScript, 'hotjar-script');
+        if (loggerFunction && typeof loggerFunction === 'function')
+            loggerFunction("Hotjar ready: " + isHotjarAppended);
         return isHotjarAppended;
     }, [appendHeadScript]);
-    var identityHotjar = React.useCallback(function (userId, userInfo, shouldLog) {
-        if (shouldLog === void 0) { shouldLog = true; }
+    var identityHotjar = React.useCallback(function (userId, userInfo, loggerFunction) {
         try {
             var hotjarIdentityScript = "var userId=\"" + userId + "\" || null;window.hj(\"identify\",userId," + userInfo + ");";
-            var isIdentified = appendHeadScript({
-                scriptText: hotjarIdentityScript,
-                scriptId: 'identity-script',
-            });
-            if (shouldLog)
-                console.info("Hotjar identified: " + isIdentified);
+            var isIdentified = appendHeadScript(hotjarIdentityScript, 'identity-script');
+            if (loggerFunction && typeof loggerFunction === 'function')
+                loggerFunction("Hotjar identified: " + isIdentified);
             return isIdentified;
@@ -60,4 +51,4 @@ }
     return React.useMemo(function () { return ({ initHotjar: initHotjar, identityHotjar: identityHotjar }); }, [
+        initHotjar,
         identityHotjar,
-        initHotjar,
     ]);
@@ -64,0 +55,0 @@ }

dist/index.test.d.ts

 export {};

dist/useAppendHeadScript.d.ts

@@ -1,9 +0,5 @@
-declare type TAppendHeadScript = {
-    scriptText: string;
-    scriptId: string;
-};
 declare type TUseAppendHeadScript = {
-    appendHeadScript: ({ scriptText, scriptId }: TAppendHeadScript) => boolean;
+    appendHeadScript: (scriptText: string, scriptId: string) => boolean;
 };
-export declare function useAppendHeadScript(): TUseAppendHeadScript;
+export default function useAppendHeadScript(): TUseAppendHeadScript;
 export {};

package.json

 {
   "name": "react-use-hotjar",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Add Hotjar capabilities as custom hooks",
@@ -34,3 +34,3 @@ "author": "Olavo Parno",
   "scripts": {
-    "test": "cross-env CI=1 react-scripts test --env=jsdom || true",
+    "test": "CI=true react-scripts test --env=jsdom || true",
     "test:watch": "react-scripts test --env=jsdom",
@@ -40,4 +40,2 @@ "build": "rollup -c",
     "prepare": "npm run build",
-    "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build",
     "format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
@@ -48,3 +46,2 @@ "lint": "eslint --fix src/**/*.{js,jsx,ts,tsx}",
   },
-  "dependencies": {},
   "peerDependencies": {
@@ -61,3 +58,2 @@ "react": "^16.13.1"
     "@typescript-eslint/parser": "^3.9.0",
-    "cross-env": "^7.0.2",
     "eslint": "^7.6.0",
@@ -72,3 +68,2 @@ "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "gh-pages": "^3.1.0",
     "husky": "^4.2.5",
@@ -84,3 +79,2 @@ "prettier": "^2.0.5",
     "rollup-plugin-typescript2": "^0.27.2",
-    "rollup-plugin-url": "^3.0.1",
     "standard-version": "^8.0.2",
@@ -87,0 +81,0 @@ "typescript": "^3.9.7"

README.md

 # react-use-hotjar
 
-> Add Hotjar capabilities as hooks
+> Add [Hotjar](https://www.hotjar.com/) capabilities as custom hooks to your project
 
 [![NPM](https://img.shields.io/npm/v/react-use-hotjar.svg)](https://www.npmjs.com/package/react-use-hotjar)
 
+---
+
+## Table of Contents
+
+- [Install](#install)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [License](#license)
+
+---
+
 ## Install
@@ -13,18 +24,81 @@
 
+---
+
 ## Usage
 
+- Initializing Hotjar
+
 ```tsx
-import * as React from "react";
+import * as React from 'react';
 
-import { useMyHook } from "react-use-hotjar";
+import { useHotjar } from 'react-use-hotjar';
 
-const Example = () => {
-  const example = useMyHook();
-  return <div>{example}</div>;
+const myCustomLogger = console.info;
+
+const HotjarReadyApp = () => {
+  const { initHotjar } = useHotjar();
+
+  React.useEffect(() => {
+    initHotjar(hotjarId, hotjarVersion, myCustomLogger);
+  });
+
+  return <App />;
 };
 ```
 
+- Identifying Users
+
+```tsx
+const MyCustomComponent = () => {
+  const { initHotjar } = useHotjar();
+
+  const handleUserInfo = (userInfo) => {
+    const { id, ...restUserInfo } = userInfo;
+
+    identityHotjar(
+      id,
+      JSON.stringify({
+        restUserInfo,
+      })
+    );
+  };
+};
+```
+
+---
+
+## Documentation
+
+`useHotjar()` returns:
+
+- initHotjar()
+
+1. `hotjarId`: Your Hotjar application ID ex.: 1933331
+2. `hotjarVersion`: Hotjar's current version ex.: 6
+3. `logCallback`: Optional callback for logging wether Hotjar is ready or not
+
+```tsx
+initHotjar: (
+  hotjarId: string,
+  hotjarVersion: string,
+  logCallback?: () => void
+) => boolean;
+```
+
+- identityHotjar()
+
+1. `userId`: Unique user's identification as string
+2. `userInfo`: Stringfied user info of key-value pairs (note this must not be so long and deep according to [docs](https://help.hotjar.com/hc/en-us/articles/360033640653-Identify-API-Reference))
+3. `logCallback`: Optional callback for logging wether Hotjar identified user or not
+
+```tsx
+identityHotjar: (userId: string, userInfo: string, logCallback?: () => void) =>
+  boolean;
+```
+
+---
+
 ## License
 
-MIT © [Olavo Parno](https://github.com/Olavo Parno)
+react-use-hotjar is [MIT licensed](./LICENSE).
 
@@ -31,0 +105,0 @@ ---

No alert changes

Improved metrics

Total package byte prevSize

19891

increased by2.85%

Dev dependency count

28

decreased by-9.68%

Number of lines in readme file

107

increased by224.24%

Worsened metrics

Lines of code

110

decreased by-16.67%

No dependency changes