react-use-hotjar - npm Package Compare versions

Comparing version 1.0.13 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [1.1.0](https://github.com/olavoparno/react-use-hotjar/compare/v1.0.13...v1.1.0) (2021-04-21)
+
+
+### Features
+
+* add stateChange functionality ([0612234](https://github.com/olavoparno/react-use-hotjar/commit/0612234774e1073e439363c0fd6f71308b5dd15a))
+
 ### [1.0.13](https://github.com/olavoparno/react-use-hotjar/compare/v1.0.12...v1.0.13) (2021-03-09)
@@ -7,0 +14,0 @@

dist/index.d.ts

@@ -1,10 +0,2 @@
-declare type TUseHotjar = {
-    initHotjar: (hotjarId: number, hotjarVersion: number, logCallback?: (...data: unknown[]) => void) => boolean;
-    identifyHotjar: (userId: string, userInfo: string | unknown, logCallback?: (...data: unknown[]) => void) => boolean;
-};
-declare type TUseAppendHeadScript = {
-    appendHeadScript: (scriptText: string, scriptId: string) => boolean;
-};
-export declare function useAppendHeadScript(): TUseAppendHeadScript;
-export default function useHotjar(): TUseHotjar;
-export {};
+import { IUseHotjar } from './dependencies';
+export default function useHotjar(): IUseHotjar;

dist/index.es.js

@@ -1,2 +0,2 @@
-import{useMemo as t,useCallback as r}from"react";function n(){var n=r((function(t,r){try{var n=document.getElementById(r)||document.createElement("script");return n.id=r,n.innerText=t,n.crossOrigin="anonymous",document.head.appendChild(n),!0}catch(t){return!1}}),[]);return t((function(){return{appendHeadScript:n}}),[n])}function e(){var e=n().appendHeadScript,i=r((function(t,r,n){var i=e("(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:"+t+",hjsv:"+r+"};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=');","hotjar-init-script");return n&&"function"==typeof n&&n("Hotjar ready: "+i),i}),[e]),o=r((function(t,r,n){try{var i="string"!=typeof r?JSON.stringify(r):r,o=e('var userId="'+t+'" || null;window.hj("identify",userId,'+i+");","hotjar-identify-script");return n&&"function"==typeof n&&n("Hotjar identified: "+o),o}catch(t){return console.error("Hotjar error:",t),!1}}),[e]);return t((function(){return{initHotjar:i,identifyHotjar:o}}),[i,o])}export default e;export{n as useAppendHeadScript};
+import{useState as t,useMemo as r,useCallback as n}from"react";function o(t,r){if(function(t,r){try{var n=document.getElementById(r)||document.createElement("script");return n.id=r,n.innerText=t,n.crossOrigin="anonymous",document.head.appendChild(n),!0}catch(t){return!1}}("(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:"+t+",hjsv:"+r+"};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=');","hotjar-init-script")&&window&&window.hj)return!0;throw Error("Hotjar initialization failed!")}function e(){var e=!(!window||!window.hj),i=t(r((function(){return e}),[e])),a=i[0],h=i[1],c=n((function(t,r,n){try{return o(t,r),h(!0),n&&"function"==typeof n&&n("Hotjar ready: true"),!0}catch(t){return console.error("Hotjar error:",t),!1}}),[]),u=n((function(t,r,n){try{return function(t,r){if(window&&window.hj)return window.hj("identify",t,r);throw Error("Hotjar is not available! Is Hotjar initialized?")}(t,r),n&&"function"==typeof n&&n("Hotjar identified"),!0}catch(t){return console.error("Hotjar error:",t),!1}}),[]),d=n((function(t,r){try{return function(t){if(window&&window.hj)return window.hj("stateChange",t);throw Error("Hotjar is not available! Is Hotjar initialized?")}(t),r&&"function"==typeof r&&r("Hotjar stateChanged"),!0}catch(t){return console.error("Hotjar error:",t),!1}}),[]);return r((function(){return{readyState:a,stateChange:d,initHotjar:c,identifyHotjar:u}}),[a,d,c,u])}export default e;
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function e(){var e=t.useCallback((function(t,e){try{var r=document.getElementById(e)||document.createElement("script");return r.id=e,r.innerText=t,r.crossOrigin="anonymous",document.head.appendChild(r),!0}catch(t){return!1}}),[]);return t.useMemo((function(){return{appendHeadScript:e}}),[e])}exports.default=function(){var r=e().appendHeadScript,n=t.useCallback((function(t,e,n){var i=r("(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:"+t+",hjsv:"+e+"};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=');","hotjar-init-script");return n&&"function"==typeof n&&n("Hotjar ready: "+i),i}),[r]),i=t.useCallback((function(t,e,n){try{var i="string"!=typeof e?JSON.stringify(e):e,a=r('var userId="'+t+'" || null;window.hj("identify",userId,'+i+");","hotjar-identify-script");return n&&"function"==typeof n&&n("Hotjar identified: "+a),a}catch(t){return console.error("Hotjar error:",t),!1}}),[r]);return t.useMemo((function(){return{initHotjar:n,identifyHotjar:i}}),[n,i])},exports.useAppendHeadScript=e;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function r(t,r){if(function(t,r){try{var e=document.getElementById(r)||document.createElement("script");return e.id=r,e.innerText=t,e.crossOrigin="anonymous",document.head.appendChild(e),!0}catch(t){return!1}}("(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:"+t+",hjsv:"+r+"};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=');","hotjar-init-script")&&window&&window.hj)return!0;throw Error("Hotjar initialization failed!")}exports.default=function(){var e=!(!window||!window.hj),n=t.useState(t.useMemo((function(){return e}),[e])),o=n[0],i=n[1],a=t.useCallback((function(t,e,n){try{return r(t,e),i(!0),n&&"function"==typeof n&&n("Hotjar ready: true"),!0}catch(t){return console.error("Hotjar error:",t),!1}}),[]),u=t.useCallback((function(t,r,e){try{return function(t,r){if(window&&window.hj)return window.hj("identify",t,r);throw Error("Hotjar is not available! Is Hotjar initialized?")}(t,r),e&&"function"==typeof e&&e("Hotjar identified"),!0}catch(t){return console.error("Hotjar error:",t),!1}}),[]),c=t.useCallback((function(t,r){try{return function(t){if(window&&window.hj)return window.hj("stateChange",t);throw Error("Hotjar is not available! Is Hotjar initialized?")}(t),r&&"function"==typeof r&&r("Hotjar stateChanged"),!0}catch(t){return console.error("Hotjar error:",t),!1}}),[]);return t.useMemo((function(){return{readyState:o,stateChange:c,initHotjar:a,identifyHotjar:u}}),[o,c,a,u])};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-use-hotjar",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "Adds Hotjar capabilities as custom hooks",
@@ -5,0 +5,0 @@ "author": "Olavo Parno",

README.md

@@ -9,4 +9,2 @@ <img align="right" alt="traffic" src="https://pv-badge.herokuapp.com/total.svg?repo_id=olavoparno-react-use-hotjar"/>
 
-[Preview-me](https://codesandbox.io/s/react-use-hotjar-dkcjp)
-
 ---
@@ -22,2 +20,3 @@
 - [Usage](#usage)
+- [Examples](#examples)
 - [Documentation](#documentation)
@@ -58,3 +57,3 @@ - [Contributors](#contributors)
 
-- Identifying Users (Use it wherever user's information is available. Send **stringified** preferably so that error handling is at this level.)
+- Identifying Users (Use it wherever user's information is available. Send and object respecting [Identify API's rules](https://help.hotjar.com/hc/en-us/articles/360033640653-Identify-API-Reference#user-attribute-values))
 
@@ -72,5 +71,4 @@ ```tsx
     const { id, ...restUserInfo } = userInfo;
-    const informationStringified = JSON.stringify(restUserInfo);
 
-    identifyHotjar(id, informationStringified);
+    identifyHotjar(id, restUserInfo, myCustomLogger);
   };
@@ -82,2 +80,9 @@ };
 
+## Examples
+
+- You may find a running [example](./example) in this project which are served at [Github Pages](https://olavoparno.github.io/react-use-hotjar).
+- Also, a running codesandbox [codesandbox](https://codesandbox.io/s/react-use-hotjar-dkcjp)
+
+---
+
 ## Documentation
@@ -89,6 +94,8 @@
 
-| key            | description              | arguments                                                                   | example                                                                                                         |
-| -------------- | ------------------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| initHotjar     | Initialize method        | (hotjarId: number, hotjarVersion: number, loggerCallback?: console[method]) | (1933331, 6, console.info)                                                                                      |
-| identifyHotjar | User identify API method | (userId: string, userInfo: json object, loggerCallback?: console[method])   | ('abcde-12345-12345', JSON.stringify({name:"Olli",surname:"Parno",address:"Streets of Tomorrow"}), console.log) |
+| key            | description                | arguments                                                                   | example                                                                                         |
+| -------------- | -------------------------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| readyState     | States if Hotjar is ready  | N/A                                                                         | N/A                                                                                             |
+| initHotjar     | Initialize method          | (hotjarId: number, hotjarVersion: number, loggerCallback?: console[method]) | (1933331, 6, console.info)                                                                      |
+| identifyHotjar | User identify API method   | (userId: string, userInfo: object, loggerCallback?: console[method])        | ('abcde-12345-12345', {name:"Olli",surname:"Parno",address:"Streets of Tomorrow"}, console.log) |
+| stateChange    | Relative path state change | (relativePath: string, loggerCallback?: console[method])                    | ('route/logged-route/user?registered=true')                                                     |
 
@@ -112,10 +119,19 @@ - initHotjar()
 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)) (Please note: **The Identify API is only available to Business plan customers.**)
+2. `userInfo`: 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)) (Please note: **The Identify API is only available to Business plan customers.**)
 3. `logCallback`: Optional callback for logging wether Hotjar identified user or not
 
 ```tsx
-identifyHotjar: (userId: string, userInfo: string, logCallback?: () => void) =>
+identifyHotjar: (userId: string, userInfo: object, logCallback?: () => void) =>
   boolean;
 ```
 
+- stateChange()
+
+1. `relativePath`: A change in a route specially for SPAs usage. [stateChange docs](https://help.hotjar.com/hc/en-us/articles/360034378534)
+2. `logCallback`: Optional callback for logging wether Hotjar stateChange was called or not
+
+```tsx
+stateChange: (relativePath: string, logCallback?: () => void) => boolean;
+```
+
 ---
@@ -122,0 +138,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19651

increased by21.69%

Number of package files

9

increased by12.5%

Lines of code

30

increased by36.36%

Number of lines in readme file

162

increased by10.96%

No dependency changes