[feat] add an optional defer property (#21)

Thanks for your contribution!
B3nnyL · Mar 17, 2021 · ce7ca01 · ce7ca01
1 parent 03a0590
commit ce7ca01
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -1,6 +1,7 @@
 import { Component } from "react";
 
 export interface IZendeskProps {
+  defer?: boolean;
   zendeskKey: string;
   [objKey: string]: any;
 }

diff --git a/src/index.js b/src/index.js
@@ -30,9 +30,13 @@ export default class Zendesk extends Component {
         }
       }
 
-      insertScript (zendeskKey) {
+      insertScript (zendeskKey, defer) {
         const script = document.createElement('script')
-        script.async = true
+        if (defer) {
+          script.defer = true
+        } else {
+          script.async = true
+        }
         script.id = 'ze-snippet'
         script.src = `https://static.zdassets.com/ekr/snippet.js?key=${zendeskKey}`
         script.addEventListener('load', this.onScriptLoaded);
@@ -41,8 +45,8 @@ export default class Zendesk extends Component {
 
       componentDidMount() {
         if (canUseDOM && !window.zE) {
-          const {zendeskKey, ...other} = this.props
-          this.insertScript(zendeskKey)
+          const {defer, zendeskKey, ...other} = this.props
+          this.insertScript(zendeskKey, defer)
           window.zESettings = other
         }
       }
@@ -61,5 +65,6 @@ export default class Zendesk extends Component {
 }
 
 Zendesk.propTypes = {
-    zendeskKey: PropTypes.string.isRequired
+    zendeskKey: PropTypes.string.isRequired,
+    defer: PropTypes.boolean
 }