react-live-chat-loader - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/components/HelpScout/index.js

 "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
@@ -10,3 +8,3 @@ value: true
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
@@ -21,6 +19,2 @@ var _ = require("../../");
 
-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; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -27,0 +21,0 @@

dist/components/Intercom/index.js

 "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
@@ -10,3 +8,3 @@ value: true
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
@@ -19,6 +17,2 @@ var _ = require("../../");
 
-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; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -25,0 +19,0 @@

dist/index.js

@@ -60,4 +60,3 @@ "use strict";
       provider = _ref.provider,
-      _ref$idlePeriod = _ref.idlePeriod,
-      idlePeriod = _ref$idlePeriod === void 0 ? 5000 : _ref$idlePeriod,
+      idlePeriod = _ref.idlePeriod,
       children = _ref.children;
@@ -94,2 +93,5 @@
 
-exports.LiveChatLoaderProvider = LiveChatLoaderProvider;
+exports.LiveChatLoaderProvider = LiveChatLoaderProvider;
+LiveChatLoaderProvider.defaultProps = {
+  idlePeriod: 5000
+};

package.json

 {
   "name": "react-live-chat-loader",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Implement live chat in your react app without taking a performance hit.",
@@ -13,2 +13,6 @@ "main": "dist/index.js",
   },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  },
   "keywords": [
@@ -47,3 +51,4 @@ "performance",
     "eslint-plugin-react": "^7.14.2",
-    "eslint-plugin-react-hooks": "^1.0.1"
+    "eslint-plugin-react-hooks": "^1.0.1",
+    "prettier": "1.19.1"
   },
@@ -50,0 +55,0 @@ "files": [

README.md

@@ -5,3 +5,3 @@ # React Live Chat Loader
 experience impact of chat tools. `react-live-chat-loader` shows a fake widget
-until the page has become idle or users are ready to interact with chat. Currently works with [Intercom](#intercom) and [Help Scout](#help-scout). 
+until the page has become idle or users are ready to interact with chat. Currently works with [Intercom](#intercom) and [Help Scout](#help-scout).
 
@@ -15,6 +15,7 @@ Made by the team at [♠ Calibre](https://calibreapp.com/), your performance companion.
 3. [Usage](#usage)
-4. [Providers](#providers)
-5. [Examples](#examples)
+4. [Supported Providers](#supported-providers)
+5. [Adding a provider](#adding-a-provider)
+6. [Examples](#examples)
 
-***
+---
 
@@ -124,7 +125,8 @@ ## How it works
 
-## Providers
+## Supported Providers
 
 Currently there are two supported providers:
 
-### Help Scout
+<details>
+<summary>Help Scout</summary>
 
@@ -161,6 +163,6 @@ To use Help Scout import the `LiveChatLoaderProvider` and set the `provider` prop
 
-### Intercom
+</details>
 
-To use Intercom import the `Intercom` component and set the `provider` prop as
-`intercom` and the `providerKey` prop as your Intercom App ID.
+<details>
+<summary>Intercom</summary>
 
@@ -173,3 +175,3 @@ To use Intercom import the `LiveChatLoaderProvider` and set the `provider` prop
 ```jsx
-import { LiveChatLoaderProvider, HelpScout } from 'react-live-chat-loader'
+import { LiveChatLoaderProvider, Intercom } from 'react-live-chat-loader'
 
@@ -191,2 +193,120 @@ export default class App extends React.Component {
 
+</details>
+
+## Adding a provider
+
+To contribute a new provider, follow these steps:
+
+#### 1. Create provider file
+
+Create a new provider file at `src/providers/providerName.js` using the
+following as a template:
+
+<details>
+<summary>Provider Template</summary>
+
+```js
+const domain = 'https://provider.domain.com'
+
+const loadScript = () => {
+  // Detect the provider is already loaded and return early
+  if (alreadyLoaded) return
+
+  // Call provider script here
+}
+
+const load = ({ providerKey }) => {
+  loadScript()
+  // Initialise provider script
+}
+
+const open = () => // Open provider
+const close = () => // Close provider
+
+export default {
+  domain,
+  load,
+  open,
+  close
+}
+```
+
+</details>
+
+The provider must export the following:
+
+- `domain`: A string of the domain where the provider script is loaded from
+  that will be used in a `preconnect` link.
+- `load`: Function which when called will load and initialize the provider
+  script. It should accept props and use the `providerKey` as the `app_id` or
+  `api_key`. For consistency, it should call a `loadScript` function.
+- `open`: Function which when called will open the provider chat.
+- `close`: Function which when called will close the provider chat.
+
+Import the new file in `src/providers/index.js` and add it to `Providers`.
+
+The name of this file will be the `providerKey` used in the
+`LiveChatLoaderProvider`.
+
+#### 2. Create component
+
+Create a new component in `src/Components/ProviderName/index.js` which
+replicates the chat widget, using the following as a template:
+
+<details>
+<summary>Component Template</summary>
+
+```jsx
+import React from 'react'
+
+import { useChat } from '../../'
+import STATES from '../../utils/states'
+
+const styles = {
+  // Add widget styles here
+  button: {
+    // Add button styles here
+  }
+}
+
+const Provider = ({ color }) => {
+  const [state, loadChat] = useChat({ loadWhenIdle: true })
+
+  if (state === STATES.COMPLETE) return null
+
+  return (
+    <div>
+      <button
+        onClick={() => loadChat({ open: true })}
+        onMouseEnter={() => loadChat({ open: false })}
+        style={{
+          ...styles.button,
+          backgroundColor: color
+        }}
+      >
+        Button
+      </button>
+    </div>
+  )
+}
+
+Provider.defaultProps = {
+  color: '#976ad4'
+}
+
+export default Provider
+```
+
+</details>
+
+Do not worry about loading animations as the widget
+will be shown instantly on page load. Increase the `z-index` by `1` so the fake
+widget sits immediately above the chat widget that is being replaced.
+
+Export the component from `src/index.js`
+
+#### 3. Update README
+
+Add your new provider to this README under [Supported Providers](#supported-providers).
+
 ## Examples
@@ -198,3 +318,3 @@
 
-* [How to avoid performance regressions when using live chat tools](https://calibreapp.com/blog/fast-live-chat)
-* [Reducing the Intercom Messenger bundle size by 65%](https://www.intercom.com/blog/reducing-intercom-messenger-bundle-size/)
+- [How to avoid performance regressions when using live chat tools](https://calibreapp.com/blog/fast-live-chat)
+- [Reducing the Intercom Messenger bundle size by 65%](https://www.intercom.com/blog/reducing-intercom-messenger-bundle-size/)

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

53196

increased by0.17%

Number of lines in readme file

314

increased by61.86%

Worsened metrics

Dev dependency count

20

increased by5.26%

Lines of code

766

decreased by-1.29%

No dependency changes