chore: update readme

ZipingL · Jun 18, 2024 · 88cea84 · 88cea84
1 parent db1017d
commit 88cea84
Show file tree

Hide file tree

Showing 7 changed files with 6,450 additions and 6,729 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ will proceed to load your script.
 
 ``` jsx
 import React from 'react';
-import Script from 'react-script-tag-18';
+import ScriptTag from 'react-script-tag-18';
 
 const MyProfileComponent = () => {
 
@@ -73,12 +73,13 @@ const MyProfileComponent = () => {
 
                 </div>
 
-            <ScriptLoader src="https://platform.linkedin.com/badges/js/profile.js" 
-            delayMs={30}
-            onLoad={() => {
-            console.log('My Profile.js script Loaded');
-            setJsLoaded(true); // set some state variable to initiate a re-render
-            }}
+            <ScriptTag src="https://platform.linkedin.com/badges/js/profile.js" 
+                delayMs={500}
+                onLoad={() => {
+                console.log('My Profile.js script Loaded');
+                setJsLoaded(true); // set some state variable to initiate a re-render
+                  }}
+                async={true}
              />
 
              </div>
@@ -94,7 +95,66 @@ export default MyProfileComponent;
 > will be appended each time the component mounts again. There are plans down
 > the road to prevent this.
 
-## Examples
+### CDN Example
+
+``` html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>react-script-tag-18 cdn demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/react-script-tag.umd.min.js"></script>
+
+</head>
+
+<body>
+    <div id="root"></div>
+    <script async="true" type="text/javascript">
+      console.info('React version:', React.version);
+        const  ScriptTag = window.ScriptTag;
+        // state loaded
+      
+        const ScriptTagELemWrapperDiv =  () => {
+            const [loaded, setLoaded] = React.useState(false);
+            const [countdown, setCountdown] = React.useState(5);
+            React.useEffect(() => {
+                const interval = setInterval(() => {
+                    setCountdown((prevCountdown) => prevCountdown - 1);
+                }, 1000);
+                return () => clearInterval(interval);
+            }, []);
+            const ScriptTagElem = React.createElement('div', {
+                children: React.createElement(ScriptTag, {
+                    src: 'https://platform.twitter.com/widgets.js',
+                    type: 'text/javascript',
+                    async: true,
+                    delayMs: 4950,
+                    onLoad:() => {
+                        console.log('Script loaded');
+                        setLoaded(true);
+                    },
+                    children: loaded ? 'Script loaded' : 'Script will be loaded in ' + countdown + (countdown === 1 ? ' second' : ' seconds'),
+                }),
+
+            });
+            return ScriptTagElem;
+        }
+     
+
+
+        ReactDOM.render(React.createElement(ScriptTagELemWrapperDiv), document.getElementById('root'));
+
+
+
+    
+    </script>
+</body>
+
+</html>
+```
+
+## ~~Deprecated Examples~~
 
 At GumGum, we usually wrap the `Script` component as follow, to facilitate
 adding 3rd-parties. Here is an example, on how we add [Qualaroo](https://qualaroo.com/):

diff --git a/lib/react-script-tag.js b/lib/react-script-tag.js
diff --git a/lib/react-script-tag.m.js b/lib/react-script-tag.m.js
diff --git a/lib/react-script-tag.umd.js b/lib/react-script-tag.umd.js
diff --git a/lib/types/index.d.ts b/lib/types/index.d.ts
@@ -13,14 +13,17 @@ export type ScriptLoaderProps = {
 /**
  *
  * @param delayMs - The delay in milliseconds before the script is loaded, optional, default is 0
- * @param onCreate - Callback function to be called when the script is created, or right after the call that appends the script to the DOM is made, optional
+ * @param onCreate - Callback function to be called when the script is created, or right after the call that appends the script to the DOM is made, optional, useful if you need to handle something right when the delay timer begins and hence when the script has not yet been loaded. Not that useful if delayMs is 0 unless for some debugging purposes.
  * @param onError - Callback function to be called when the script fails to load, optional
- * @param onLoad - Callback function to be called when the script is loaded, optional
+ * @param onLoad - Callback function to be called when the script is loaded, or in other words when the script has succesfully loaded and executed its contents, optional
  * @param src - The source URL of the script to be loaded, required
- * @param otherProps - Any other attributes to be added to the script tag, optional, e.g. { "data-foo": "bar" }
- * @returns <></> - Returns an empty fragment
+ * @param ...otherProps - Any additional attributes to be added to the script tag, optional
+ * @param children - Any children to be rendered, optional, default is an empty fragment
+ * @returns <></> - Returns an empty fragment or fragment with children
  * @example
- * <ScriptLoader src="https://www.example.com/script.js"
+ * <ScriptLoader
+ *    data-other-prop="other-prop-value"
+ *    src="https://www.example.com/script.js"
  *    delayMs={1000} onLoad={(e) => console.log("Script loaded successfully")} />
  */
 export default function ScriptTag({ delayMs, onCreate, onError, onLoad, src, id, className, children, ...otherProps }: ScriptLoaderProps): React.JSX.Element;