react-use-intercom - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/context.d.ts

@@ -1,4 +0,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IntercomContextValues } from './contextTypes';
-declare const IntercomContext: import("react").Context<IntercomContextValues>;
+declare const IntercomContext: React.Context<IntercomContextValues>;
 export default IntercomContext;

dist/react-use-intercom.cjs.development.js

@@ -5,6 +5,3 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
 
@@ -263,9 +260,7 @@ function _extends() {
   if (!isEmptyObject(rest)) log('error', ['some invalid props were passed to IntercomProvider. ', "Please check following props: " + Object.keys(rest).join(', ') + "."].join(''));
+  var memoizedAppId = React.useRef(appId);
+  var isBooted = React.useRef(autoBoot);
 
-  var _useState = React.useState(autoBoot),
-      isBooted = _useState[0],
-      setIsBooted = _useState[1];
-
   if (!window.Intercom) {
-    initialize(appId); // Only add listeners on initialization
+    initialize(memoizedAppId.current); // Only add listeners on initialization
 
@@ -278,6 +273,6 @@ if (onHide) IntercomAPI('onHide', onHide);
       IntercomAPI('boot', {
-        app_id: appId
+        app_id: memoizedAppId.current
       });
       window.intercomSettings = {
-        app_id: appId
+        app_id: memoizedAppId.current
       };
@@ -292,3 +287,3 @@ }
 
-    if (!isBooted) {
+    if (!isBooted.current) {
       log('warn', ["'" + functionName + "' was called but Intercom has not booted yet. ", "Please call 'boot' before calling '" + functionName + "' or ", "set 'autoBoot' to true in the IntercomProvider."].join(''));
@@ -299,8 +294,8 @@ return;
     return callback();
-  }, [isBooted]);
+  }, []);
   var boot = React.useCallback(function (props) {
-    if (isBooted) return;
+    if (isBooted.current) return;
 
     var metaData = _extends({
-      app_id: appId
+      app_id: memoizedAppId.current
     }, props && mapIntercomPropsToRawIntercomProps(props));
@@ -310,16 +305,16 @@
     IntercomAPI('boot', metaData);
-    setIsBooted(true);
-  }, [appId, isBooted]);
+    isBooted.current = true;
+  }, []);
   var shutdown = React.useCallback(function () {
-    if (!isBooted) return;
+    if (!isBooted.current) return;
     IntercomAPI('shutdown');
-    setIsBooted(false);
-  }, [isBooted]);
+    isBooted.current = false;
+  }, []);
   var hardShutdown = React.useCallback(function () {
-    if (!isBooted) return;
+    if (!isBooted.current) return;
     IntercomAPI('shutdown');
     delete window.Intercom;
     delete window.intercomSettings;
-    setIsBooted(false);
-  }, [isBooted]);
+    isBooted.current = false;
+  }, []);
   var refresh = React.useCallback(function () {
@@ -406,3 +401,3 @@ ensureIntercomIsBooted('update', function () {
   }, [children]);
-  return React__default.createElement(IntercomContext.Provider, {
+  return React.createElement(IntercomContext.Provider, {
     value: providerValue
@@ -409,0 +404,0 @@ }, content);

dist/react-use-intercom.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}var r=function(e,t){var n="[react-use-intercom]";switch(e){case"info":console.log(n+" "+t);break;case"warn":console.warn(n+" "+t);break;case"error":console.error(n+" "+t);break;default:console.log(n+" "+t)}},a="Please wrap your component with `IntercomProvider`.",i=t.createContext({boot:function(){return r("error",a)},shutdown:function(){return r("error",a)},hardShutdown:function(){return r("error",a)},update:function(){return r("error",a)},hide:function(){return r("error",a)},show:function(){return r("error",a)},showMessages:function(){return r("error",a)},showNewMessages:function(){return r("error",a)},getVisitorId:function(){return r("error",a),""},startTour:function(){return r("error",a)},trackEvent:function(){return r("error",a)}}),u=function(e){if(window.Intercom){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];return window.Intercom.apply(null,[e].concat(n))}console.warn("[intercom] Intercom instance is not initialized yet")},c=function(e){return{company_id:e.companyId,name:e.name,created_at:e.createdAt,plan:e.plan,monthly_spend:e.monthlySpend,user_count:e.userCount,size:e.size,website:e.website,industry:e.industry}},s=function(e){return{type:e.type,image_url:e.imageUrl}},d=function(e){return function e(t){return Object.keys(t).forEach((function(n){t[n]&&"object"==typeof t[n]?e(t[n]):void 0===t[n]&&delete t[n]})),t}(o(o({},{custom_launcher_selector:(t=e).customLauncherSelector,alignment:t.alignment,vertical_padding:t.verticalPadding,horizontal_padding:t.horizontalPadding,hide_default_launcher:t.hideDefaultLauncher,session_duration:t.sessionDuration,action_color:t.actionColor,background_color:t.backgroundColor}),function(e){var t;return o({email:e.email,user_id:e.userId,created_at:e.createdAt,name:e.name,phone:e.phone,last_request_at:e.lastRequestAt,unsubscribed_from_emails:e.unsubscribedFromEmails,language_override:e.languageOverride,utm_campaign:e.utmCampaign,utm_content:e.utmContent,utm_medium:e.utmMedium,utm_source:e.utmSource,utm_term:e.utmTerm,avatar:e.avatar&&s(e.avatar),user_hash:e.userHash,company:e.company&&c(e.company),companies:null===(t=e.companies)||void 0===t?void 0:t.map(c)},e.customAttributes)}(e)));var t};exports.IntercomProvider=function(e){var a,c=e.appId,s=e.autoBoot,l=void 0!==s&&s,f=e.children,m=e.onHide,h=e.onShow,p=e.onUnreadCountChange,w=function(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)t.indexOf(n=a[o])>=0||(r[n]=e[n]);return r}(e,["appId","autoBoot","children","onHide","onShow","onUnreadCountChange"]);a=w,(0!==Object.keys(a).length||a.constructor!==Object)&&r("error",["some invalid props were passed to IntercomProvider. ","Please check following props: "+Object.keys(w).join(", ")+"."].join(""));var g=t.useState(l),v=g[0],b=g[1];window.Intercom||(function(e){var t=window,n=t.Intercom;if("function"==typeof n)n("reattach_activator"),n("update",t.intercomSettings);else{var o=document,r=function e(){e.c(arguments)};r.q=[],r.c=function(e){r.q.push(e)},t.Intercom=r;var a=function(){var t=o.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://widget.intercom.io/widget/"+e;var n=o.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};t.attachEvent?t.attachEvent("onload",a):t.addEventListener("load",a,!1)}}(c),m&&u("onHide",m),h&&u("onShow",h),p&&u("onUnreadCountChange",p),l&&(u("boot",{app_id:c}),window.intercomSettings={app_id:c}));var _=t.useCallback((function(e,t){if(void 0===e&&(e="A function"),v)return t();r("warn",["'"+e+"' was called but Intercom has not booted yet. ","Please call 'boot' before calling '"+e+"' or ","set 'autoBoot' to true in the IntercomProvider."].join(""))}),[v]),y=t.useCallback((function(e){if(!v){var t=o({app_id:c},e&&d(e));window.intercomSettings=t,u("boot",t),b(!0)}}),[c,v]),k=t.useCallback((function(){v&&(u("shutdown"),b(!1))}),[v]),C=t.useCallback((function(){v&&(u("shutdown"),delete window.Intercom,delete window.intercomSettings,b(!1))}),[v]),I=t.useCallback((function(){_("update",(function(){var e=(new Date).getTime();u("update",{last_requested_at:e})}))}),[_]),S=t.useCallback((function(e){_("update",(function(){if(e){var t=d(e);window.intercomSettings=o(o({},window.intercomSettings),t),u("update",t)}else I()}))}),[_,I]),j=t.useCallback((function(){_("hide",(function(){u("hide")}))}),[_]),E=t.useCallback((function(){_("show",(function(){return u("show")}))}),[_]),M=t.useCallback((function(){_("showMessages",(function(){u("showMessages")}))}),[_]),P=t.useCallback((function(e){_("showNewMessage",(function(){e?u("showNewMessage",e):u("showNewMessage")}))}),[_]),O=t.useCallback((function(){return _("getVisitorId",(function(){return u("getVisitorId")}))}),[_]),x=t.useCallback((function(e){_("startTour",(function(){u("startTour",e)}))}),[_]),N=t.useCallback((function(e,t){_("trackEvent",(function(){t?u("trackEvent",e,t):u("trackEvent",e)}))}),[_]),T=t.useMemo((function(){return{boot:y,shutdown:k,hardShutdown:C,update:S,hide:j,show:E,showMessages:M,showNewMessages:P,getVisitorId:O,startTour:x,trackEvent:N}}),[y,k,C,S,j,E,M,P,O,x,N]),q=t.useMemo((function(){return f}),[f]);return n.createElement(i.Provider,{value:T},q)},exports.useIntercom=function(){return t.useContext(i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(){return(t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var n=function(e,t){var n="[react-use-intercom]";switch(e){case"info":console.log(n+" "+t);break;case"warn":console.warn(n+" "+t);break;case"error":console.error(n+" "+t);break;default:console.log(n+" "+t)}},r="Please wrap your component with `IntercomProvider`.",o=e.createContext({boot:function(){return n("error",r)},shutdown:function(){return n("error",r)},hardShutdown:function(){return n("error",r)},update:function(){return n("error",r)},hide:function(){return n("error",r)},show:function(){return n("error",r)},showMessages:function(){return n("error",r)},showNewMessages:function(){return n("error",r)},getVisitorId:function(){return n("error",r),""},startTour:function(){return n("error",r)},trackEvent:function(){return n("error",r)}}),a=function(e){if(window.Intercom){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return window.Intercom.apply(null,[e].concat(n))}console.warn("[intercom] Intercom instance is not initialized yet")},u=function(e){return{company_id:e.companyId,name:e.name,created_at:e.createdAt,plan:e.plan,monthly_spend:e.monthlySpend,user_count:e.userCount,size:e.size,website:e.website,industry:e.industry}},i=function(e){return{type:e.type,image_url:e.imageUrl}},c=function(e){return function e(t){return Object.keys(t).forEach((function(n){t[n]&&"object"==typeof t[n]?e(t[n]):void 0===t[n]&&delete t[n]})),t}(t(t({},{custom_launcher_selector:(n=e).customLauncherSelector,alignment:n.alignment,vertical_padding:n.verticalPadding,horizontal_padding:n.horizontalPadding,hide_default_launcher:n.hideDefaultLauncher,session_duration:n.sessionDuration,action_color:n.actionColor,background_color:n.backgroundColor}),function(e){var n;return t({email:e.email,user_id:e.userId,created_at:e.createdAt,name:e.name,phone:e.phone,last_request_at:e.lastRequestAt,unsubscribed_from_emails:e.unsubscribedFromEmails,language_override:e.languageOverride,utm_campaign:e.utmCampaign,utm_content:e.utmContent,utm_medium:e.utmMedium,utm_source:e.utmSource,utm_term:e.utmTerm,avatar:e.avatar&&i(e.avatar),user_hash:e.userHash,company:e.company&&u(e.company),companies:null===(n=e.companies)||void 0===n?void 0:n.map(u)},e.customAttributes)}(e)));var n};exports.IntercomProvider=function(r){var u,i=r.appId,s=r.autoBoot,d=void 0!==s&&s,l=r.children,f=r.onHide,m=r.onShow,h=r.onUnreadCountChange,p=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}(r,["appId","autoBoot","children","onHide","onShow","onUnreadCountChange"]);u=p,(0!==Object.keys(u).length||u.constructor!==Object)&&n("error",["some invalid props were passed to IntercomProvider. ","Please check following props: "+Object.keys(p).join(", ")+"."].join(""));var w=e.useRef(i),g=e.useRef(d);window.Intercom||(function(e){var t=window,n=t.Intercom;if("function"==typeof n)n("reattach_activator"),n("update",t.intercomSettings);else{var r=document,o=function e(){e.c(arguments)};o.q=[],o.c=function(e){o.q.push(e)},t.Intercom=o;var a=function(){var t=r.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://widget.intercom.io/widget/"+e;var n=r.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};t.attachEvent?t.attachEvent("onload",a):t.addEventListener("load",a,!1)}}(w.current),f&&a("onHide",f),m&&a("onShow",m),h&&a("onUnreadCountChange",h),d&&(a("boot",{app_id:w.current}),window.intercomSettings={app_id:w.current}));var v=e.useCallback((function(e,t){if(void 0===e&&(e="A function"),g.current)return t();n("warn",["'"+e+"' was called but Intercom has not booted yet. ","Please call 'boot' before calling '"+e+"' or ","set 'autoBoot' to true in the IntercomProvider."].join(""))}),[]),b=e.useCallback((function(e){if(!g.current){var n=t({app_id:w.current},e&&c(e));window.intercomSettings=n,a("boot",n),g.current=!0}}),[]),_=e.useCallback((function(){g.current&&(a("shutdown"),g.current=!1)}),[]),y=e.useCallback((function(){g.current&&(a("shutdown"),delete window.Intercom,delete window.intercomSettings,g.current=!1)}),[]),k=e.useCallback((function(){v("update",(function(){var e=(new Date).getTime();a("update",{last_requested_at:e})}))}),[v]),C=e.useCallback((function(e){v("update",(function(){if(e){var n=c(e);window.intercomSettings=t(t({},window.intercomSettings),n),a("update",n)}else k()}))}),[v,k]),I=e.useCallback((function(){v("hide",(function(){a("hide")}))}),[v]),S=e.useCallback((function(){v("show",(function(){return a("show")}))}),[v]),j=e.useCallback((function(){v("showMessages",(function(){a("showMessages")}))}),[v]),E=e.useCallback((function(e){v("showNewMessage",(function(){e?a("showNewMessage",e):a("showNewMessage")}))}),[v]),M=e.useCallback((function(){return v("getVisitorId",(function(){return a("getVisitorId")}))}),[v]),P=e.useCallback((function(e){v("startTour",(function(){a("startTour",e)}))}),[v]),O=e.useCallback((function(e,t){v("trackEvent",(function(){t?a("trackEvent",e,t):a("trackEvent",e)}))}),[v]),x=e.useMemo((function(){return{boot:b,shutdown:_,hardShutdown:y,update:C,hide:I,show:S,showMessages:j,showNewMessages:E,getVisitorId:M,startTour:P,trackEvent:O}}),[b,_,y,C,I,S,j,E,M,P,O]),N=e.useMemo((function(){return l}),[l]);return e.createElement(o.Provider,{value:x},N)},exports.useIntercom=function(){return e.useContext(o)};
 //# sourceMappingURL=react-use-intercom.cjs.production.min.js.map

dist/react-use-intercom.esm.js

@@ -1,2 +0,2 @@
-import React, { createContext, useState, useCallback, useMemo, useContext } from 'react';
+import { createContext, useRef, useCallback, useMemo, createElement, useContext } from 'react';
 
@@ -255,9 +255,7 @@ function _extends() {
   if (!isEmptyObject(rest)) log('error', ['some invalid props were passed to IntercomProvider. ', "Please check following props: " + Object.keys(rest).join(', ') + "."].join(''));
+  var memoizedAppId = useRef(appId);
+  var isBooted = useRef(autoBoot);
 
-  var _useState = useState(autoBoot),
-      isBooted = _useState[0],
-      setIsBooted = _useState[1];
-
   if (!window.Intercom) {
-    initialize(appId); // Only add listeners on initialization
+    initialize(memoizedAppId.current); // Only add listeners on initialization
 
@@ -270,6 +268,6 @@ if (onHide) IntercomAPI('onHide', onHide);
       IntercomAPI('boot', {
-        app_id: appId
+        app_id: memoizedAppId.current
       });
       window.intercomSettings = {
-        app_id: appId
+        app_id: memoizedAppId.current
       };
@@ -284,3 +282,3 @@ }
 
-    if (!isBooted) {
+    if (!isBooted.current) {
       log('warn', ["'" + functionName + "' was called but Intercom has not booted yet. ", "Please call 'boot' before calling '" + functionName + "' or ", "set 'autoBoot' to true in the IntercomProvider."].join(''));
@@ -291,8 +289,8 @@ return;
     return callback();
-  }, [isBooted]);
+  }, []);
   var boot = useCallback(function (props) {
-    if (isBooted) return;
+    if (isBooted.current) return;
 
     var metaData = _extends({
-      app_id: appId
+      app_id: memoizedAppId.current
     }, props && mapIntercomPropsToRawIntercomProps(props));
@@ -302,16 +300,16 @@
     IntercomAPI('boot', metaData);
-    setIsBooted(true);
-  }, [appId, isBooted]);
+    isBooted.current = true;
+  }, []);
   var shutdown = useCallback(function () {
-    if (!isBooted) return;
+    if (!isBooted.current) return;
     IntercomAPI('shutdown');
-    setIsBooted(false);
-  }, [isBooted]);
+    isBooted.current = false;
+  }, []);
   var hardShutdown = useCallback(function () {
-    if (!isBooted) return;
+    if (!isBooted.current) return;
     IntercomAPI('shutdown');
     delete window.Intercom;
     delete window.intercomSettings;
-    setIsBooted(false);
-  }, [isBooted]);
+    isBooted.current = false;
+  }, []);
   var refresh = useCallback(function () {
@@ -398,3 +396,3 @@ ensureIntercomIsBooted('update', function () {
   }, [children]);
-  return React.createElement(IntercomContext.Provider, {
+  return createElement(IntercomContext.Provider, {
     value: providerValue
@@ -401,0 +399,0 @@ }, content);

package.json

@@ -7,3 +7,3 @@ {
   "homepage": "https://github.com/devrnt/react-use-intercom#readme",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
@@ -10,0 +10,0 @@ "main": "dist/index.js",

README.md

@@ -8,3 +8,3 @@ # react-use-intercom
 
-A React [Intercom](https://www.intercom.com/) integration focused on developer experience.
+A React [Intercom](https://www.intercom.com/) integration powered by hooks.
 
@@ -50,2 +50,3 @@ ## Features
 * [TypeScript](#typescript)
+* [Troubleshoot](#troubleshoot)
 * [Advanced](#advanced)
@@ -61,2 +62,4 @@
 
+Place the `IntercomProvider` as high as possible in your application. This will make sure you can `useIntercom()` anywhere.
+
 #### Props
@@ -102,4 +105,6 @@ | name                | type             | description                                                                             | required | default |
 
-**Remark** - make sure `IntercomProvider` is wrapped around your component when calling `useIntercom()`
+ Make sure `IntercomProvider` is wrapped around your component when calling `useIntercom()`. 
 
+**Remark** - You can't use `useIntercom()` in the same component where `IntercomProvider` is initialized. 
+
 #### Methods
@@ -221,2 +226,12 @@ | name            | type                                       | description                                                                                                                         |
 
+## Troubleshoot
+* I'm seeing "Please wrap your component with IntercomProvider.` in the console.
+> Make sure `IntercomProvider` is initialized before calling `useIntercom()`. You only need to initialize `IntercomProvider` once. It is advised to initialize `IntercomProvider` as high as possible in your application tree.
+
+> Make sure you aren't calling `useIntercom()` in the same component where you initialized `IntercomProvider`.
+
+* I'm seeing `Some invalid props were passed to IntercomProvider. Please check following props: [properties]` in the console.
+> Make sure you're passing the correct properties to the `IntercomProvider`. Check [IntercomProvider](#intercomprovider) to see all the properties.
+> Mind that all the properties in `react-use-intercom` are camel cased, except for the `customAttributes` property in the `boot` and `update` method from `useIntercom`.
+
 ## Advanced
@@ -223,0 +238,0 @@ To reduce the amount of re-renders in your React application I suggest to make use of [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)

No alert changes

Improved metrics

Total package byte prevSize

176302

increased by0.96%

Number of lines in readme file

270

increased by5.88%

Worsened metrics

Lines of code

2050

decreased by-0.29%

No dependency changes