react-linkedinbadge - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

lib/bundle.esm.d.ts

@@ -10,2 +10,3 @@ import React from 'react';
  * @param type: "VERTICAL" | "HORIZONTAL" - This actually adjusts the size of the badge, where VERTICAL is smaller than HORIZONTAL, so by setting  size to "medium" and type to "VERTICAL" you get a smaller badge than setting size to "medium" and type to "HORIZONTAL", and so on.
+ * @param script_src: string - source url for the linkedin badge script, this is optional and only needed if you want to use a different script other than the one used in LinkedIn's badge documentation `(https://platform.linkedin.com/badges/js/profile.js)`
  */
@@ -22,2 +23,3 @@ declare type LinkedInBadgeProps = {
     id: string;
+    script_src: string;
     name: string;
@@ -24,0 +26,0 @@ };

lib/index.d.ts

@@ -9,2 +9,3 @@ import React from 'react';
  * @param type: "VERTICAL" | "HORIZONTAL" - This actually adjusts the size of the badge, where VERTICAL is smaller than HORIZONTAL, so by setting  size to "medium" and type to "VERTICAL" you get a smaller badge than setting size to "medium" and type to "HORIZONTAL", and so on.
+ * @param script_src: string - source url for the linkedin badge script, this is optional and only needed if you want to use a different script other than the one used in LinkedIn's badge documentation `(https://platform.linkedin.com/badges/js/profile.js)`
  */
@@ -21,2 +22,3 @@ export declare type LinkedInBadgeProps = {
     id: string;
+    script_src: string;
     name: string;
@@ -23,0 +25,0 @@ };

lib/index.js

@@ -21,3 +21,3 @@ import React from 'react';
                 script.id = id;
-                script.src = "https://platform.linkedin.com/badges/js/profile.js";
+                script.src = props.script_src || "https://platform.linkedin.com/badges/js/profile.js";
                 script.async = true;
@@ -34,3 +34,3 @@ script.defer = true;
                 newScript.id = id;
-                newScript.src = "https://platform.linkedin.com/badges/js/profile.js";
+                newScript.src = props.script_src || "https://platform.linkedin.com/badges/js/profile.js";
                 newScript.async = true;
@@ -43,4 +43,4 @@ newScript.defer = true;
     }, [componentDidMount, props.id]);
-    return (React.createElement("div", { className: "badge-base LI-profile-badge" + (props.className ? ` ${props.className}` : ""), style: props.style, id: props.id, "data-locale": locale, "data-size": size, "data-theme": theme, "data-type": type, "data-vanity": vanity, "data-version": version },
+    return (React.createElement("div", { className: "badge-base LI-profile-badge" + (props.className ? ` ${props.className}` : ""), style: props.style, "data-locale": locale, "data-size": size, "data-theme": theme, "data-type": type, "data-vanity": vanity, "data-version": version },
         React.createElement("a", { className: "badge-base__link LI-simple-link", href: url }, name)));
 }

lib/linkedinbadge.bundle.js

 /* react-linkedinbadge */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactScriptTag={},e.React)}(this,(function(e,t){"use strict";e.default=function(e){const n=e.locale||"en_US",a=e.size||"medium",i=e.theme||"light",d=e.type||"VERTICAL",s=e.vanity||"☯liu",o=e.version||"v1",c=encodeURIComponent(s),l=e.name||"",r=`https://www.linkedin.com/in/${c}?trk=profile-badge`,[m,f]=t.useState(!1);return t.useEffect((()=>{if(!m){const t=e.id||"linkedin-badge-script";if(document.getElementById(t)){const e=document.getElementById(t);e?.remove();const n=document.createElement("script");n.id=t,n.src="https://platform.linkedin.com/badges/js/profile.js",n.async=!0,n.defer=!0,document.body.appendChild(n),f(!0)}else{const e=document.createElement("script");e.id=t,e.src="https://platform.linkedin.com/badges/js/profile.js",e.async=!0,e.defer=!0,document.body.appendChild(e),f(!0)}}}),[m,e.id]),t.createElement("div",{className:"badge-base LI-profile-badge"+(e.className?` ${e.className}`:""),style:e.style,id:e.id,"data-locale":n,"data-size":a,"data-theme":i,"data-type":d,"data-vanity":s,"data-version":o},t.createElement("a",{className:"badge-base__link LI-simple-link",href:r},l))},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactScriptTag={},e.React)}(this,(function(e,t){"use strict";e.default=function(e){const n=e.locale||"en_US",a=e.size||"medium",i=e.theme||"light",s=e.type||"VERTICAL",d=e.vanity||"☯liu",c=e.version||"v1",o=encodeURIComponent(d),l=e.name||"",r=`https://www.linkedin.com/in/${o}?trk=profile-badge`,[m,p]=t.useState(!1);return t.useEffect((()=>{if(!m){const t=e.id||"linkedin-badge-script";if(document.getElementById(t)){const n=document.getElementById(t);n?.remove();const a=document.createElement("script");a.id=t,a.src=e.script_src||"https://platform.linkedin.com/badges/js/profile.js",a.async=!0,a.defer=!0,document.body.appendChild(a),p(!0)}else{const n=document.createElement("script");n.id=t,n.src=e.script_src||"https://platform.linkedin.com/badges/js/profile.js",n.async=!0,n.defer=!0,document.body.appendChild(n),p(!0)}}}),[m,e.id]),t.createElement("div",{className:"badge-base LI-profile-badge"+(e.className?` ${e.className}`:""),style:e.style,"data-locale":n,"data-size":a,"data-theme":i,"data-type":s,"data-vanity":d,"data-version":c},t.createElement("a",{className:"badge-base__link LI-simple-link",href:r},l))},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5idW5kbGUuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9

lib/linkedinbadge.cjs.js

 /* react-linkedinbadge */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.default=function(t){const a=t.locale||"en_US",s=t.size||"medium",d=t.theme||"light",n=t.type||"VERTICAL",i=t.vanity||"☯liu",c=t.version||"v1",l=encodeURIComponent(i),o=t.name||"",r=`https://www.linkedin.com/in/${l}?trk=profile-badge`,[m,p]=e.useState(!1);return e.useEffect((()=>{if(!m){const e=t.id||"linkedin-badge-script";if(document.getElementById(e)){const t=document.getElementById(e);t?.remove();const a=document.createElement("script");a.id=e,a.src="https://platform.linkedin.com/badges/js/profile.js",a.async=!0,a.defer=!0,document.body.appendChild(a),p(!0)}else{const t=document.createElement("script");t.id=e,t.src="https://platform.linkedin.com/badges/js/profile.js",t.async=!0,t.defer=!0,document.body.appendChild(t),p(!0)}}}),[m,t.id]),e.createElement("div",{className:"badge-base LI-profile-badge"+(t.className?` ${t.className}`:""),style:t.style,id:t.id,"data-locale":a,"data-size":s,"data-theme":d,"data-type":n,"data-vanity":i,"data-version":c},e.createElement("a",{className:"badge-base__link LI-simple-link",href:r},o))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.default=function(t){const a=t.locale||"en_US",s=t.size||"medium",n=t.theme||"light",d=t.type||"VERTICAL",i=t.vanity||"☯liu",c=t.version||"v1",l=encodeURIComponent(i),r=t.name||"",o=`https://www.linkedin.com/in/${l}?trk=profile-badge`,[m,p]=e.useState(!1);return e.useEffect((()=>{if(!m){const e=t.id||"linkedin-badge-script";if(document.getElementById(e)){const a=document.getElementById(e);a?.remove();const s=document.createElement("script");s.id=e,s.src=t.script_src||"https://platform.linkedin.com/badges/js/profile.js",s.async=!0,s.defer=!0,document.body.appendChild(s),p(!0)}else{const a=document.createElement("script");a.id=e,a.src=t.script_src||"https://platform.linkedin.com/badges/js/profile.js",a.async=!0,a.defer=!0,document.body.appendChild(a),p(!0)}}}),[m,t.id]),e.createElement("div",{className:"badge-base LI-profile-badge"+(t.className?` ${t.className}`:""),style:t.style,"data-locale":a,"data-size":s,"data-theme":n,"data-type":d,"data-vanity":i,"data-version":c},e.createElement("a",{className:"badge-base__link LI-simple-link",href:o},r))};
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5janMuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9

lib/linkedinbadge.esm.js

 /* react-linkedinbadge */
-import e from"react";function t(t){const a=t.locale||"en_US",n=t.size||"medium",d=t.theme||"light",s=t.type||"VERTICAL",i=t.vanity||"☯liu",c=t.version||"v1",l=encodeURIComponent(i),o=t.name||"",m=`https://www.linkedin.com/in/${l}?trk=profile-badge`,[r,p]=e.useState(!1);return e.useEffect((()=>{if(!r){const e=t.id||"linkedin-badge-script";if(document.getElementById(e)){const t=document.getElementById(e);t?.remove();const a=document.createElement("script");a.id=e,a.src="https://platform.linkedin.com/badges/js/profile.js",a.async=!0,a.defer=!0,document.body.appendChild(a),p(!0)}else{const t=document.createElement("script");t.id=e,t.src="https://platform.linkedin.com/badges/js/profile.js",t.async=!0,t.defer=!0,document.body.appendChild(t),p(!0)}}}),[r,t.id]),e.createElement("div",{className:"badge-base LI-profile-badge"+(t.className?` ${t.className}`:""),style:t.style,id:t.id,"data-locale":a,"data-size":n,"data-theme":d,"data-type":s,"data-vanity":i,"data-version":c},e.createElement("a",{className:"badge-base__link LI-simple-link",href:m},o))}export{t as default};
+import e from"react";function t(t){const a=t.locale||"en_US",s=t.size||"medium",n=t.theme||"light",d=t.type||"VERTICAL",i=t.vanity||"☯liu",c=t.version||"v1",l=encodeURIComponent(i),o=t.name||"",r=`https://www.linkedin.com/in/${l}?trk=profile-badge`,[m,p]=e.useState(!1);return e.useEffect((()=>{if(!m){const e=t.id||"linkedin-badge-script";if(document.getElementById(e)){const a=document.getElementById(e);a?.remove();const s=document.createElement("script");s.id=e,s.src=t.script_src||"https://platform.linkedin.com/badges/js/profile.js",s.async=!0,s.defer=!0,document.body.appendChild(s),p(!0)}else{const a=document.createElement("script");a.id=e,a.src=t.script_src||"https://platform.linkedin.com/badges/js/profile.js",a.async=!0,a.defer=!0,document.body.appendChild(a),p(!0)}}}),[m,t.id]),e.createElement("div",{className:"badge-base LI-profile-badge"+(t.className?` ${t.className}`:""),style:t.style,"data-locale":a,"data-size":s,"data-theme":n,"data-type":d,"data-vanity":i,"data-version":c},e.createElement("a",{className:"badge-base__link LI-simple-link",href:r},o))}export{t as default};
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5lc20uanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9

lib/linkedinbadge.js

 /* LinkedInBadge */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).React)}(this,(function(e){"use strict";function t(t){const n=t.locale||"en_US",d=t.size||"medium",i=t.theme||"light",a=t.type||"VERTICAL",o=t.vanity||"☯liu",s=t.version||"v1",c=encodeURIComponent(o),l=t.name||"",m=`https://www.linkedin.com/in/${c}?trk=profile-badge`,[r,f]=e.useState(!1);return e.useEffect((()=>{
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).React)}(this,(function(e){"use strict";function t(t){const n=t.locale||"en_US",i=t.size||"medium",d=t.theme||"light",a=t.type||"VERTICAL",s=t.vanity||"☯liu",o=t.version||"v1",c=encodeURIComponent(s),l=t.name||"",r=`https://www.linkedin.com/in/${c}?trk=profile-badge`,[m,f]=e.useState(!1);return e.useEffect((()=>{
 // append the linkedin badge script to the body if it hasn't been appended yet
-if(!r){
+if(!m){
 // first check if the script has already been added by id
 const e=t.id||"linkedin-badge-script";if(document.getElementById(e)){
 // re-render the script by removing and re-adding it
-const t=document.getElementById(e);t?.remove();const n=document.createElement("script");n.id=e,n.src="https://platform.linkedin.com/badges/js/profile.js",n.async=!0,n.defer=!0,document.body.appendChild(n),f(!0)}else{const t=document.createElement("script");t.id=e,t.src="https://platform.linkedin.com/badges/js/profile.js",t.async=!0,t.defer=!0,document.body.appendChild(t),f(!0)}}}),[r,t.id]),e.createElement("div",{className:"badge-base LI-profile-badge"+(t.className?` ${t.className}`:""),style:t.style,id:t.id,"data-locale":n,"data-size":d,"data-theme":i,"data-type":a,"data-vanity":o,"data-version":s},e.createElement("a",{className:"badge-base__link LI-simple-link",href:m},l))}"undefined"!=typeof window&&void 0===window.LinkedInBadge&&(window.LinkedInBadge=t)}));
+const n=document.getElementById(e);n?.remove();const i=document.createElement("script");i.id=e,i.src=t.script_src||"https://platform.linkedin.com/badges/js/profile.js",i.async=!0,i.defer=!0,document.body.appendChild(i),f(!0)}else{const n=document.createElement("script");n.id=e,n.src=t.script_src||"https://platform.linkedin.com/badges/js/profile.js",n.async=!0,n.defer=!0,document.body.appendChild(n),f(!0)}}}),[m,t.id]),e.createElement("div",{className:"badge-base LI-profile-badge"+(t.className?` ${t.className}`:""),style:t.style,"data-locale":n,"data-size":i,"data-theme":d,"data-type":a,"data-vanity":s,"data-version":o},e.createElement("a",{className:"badge-base__link LI-simple-link",href:r},l))}"undefined"!=typeof window&&void 0===window.LinkedInBadge&&(window.LinkedInBadge=t)}));
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7In0=

package.json

 {
   "name": "react-linkedinbadge",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Embedded LinkedIn Badges via React fast Reactions as if all your linkedin accounts are being restricted in React-not time",
@@ -5,0 +5,0 @@

README.md

@@ -43,3 +43,36 @@ ## What is This?
 
+Full example:
+```html
+<html>
 
+<head>
+   <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+   <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+   <script src="https://cdn.jsdelivr.net/npm/react-linkedinbadge@4/lib/linkedinbadge.min.js"></script>
+</head>
+
+<body>
+   <div id="root"></div>
+
+   <script async defer>
+      console.log("HI")
+      const LinkedInBadge = window.LinkedInBadge;
+      console.info(LinkedInBadge)
+      const Reactelem = React.createElement(LinkedInBadge, {
+         type: "HORIZONTAL",
+         size: "large",
+         theme: "DARK",
+         vanity: "☯liu",
+      });
+      const rootelem = document.getElementById('root');
+      if (rootelem) {
+         ReactDOM.render(Reactelem, rootelem);
+      } 
+   </script>
+</body>
+
+</html>
+```
+
+
 ### Links
@@ -46,0 +79,0 @@ - [NPM Package](https://www.npmjs.com/package/react-linkedinbadge)

types/index.d.ts

@@ -9,2 +9,3 @@ import React from 'react';
  * @param type: "VERTICAL" | "HORIZONTAL" - This actually adjusts the size of the badge, where VERTICAL is smaller than HORIZONTAL, so by setting  size to "medium" and type to "VERTICAL" you get a smaller badge than setting size to "medium" and type to "HORIZONTAL", and so on.
+ * @param script_src: string - source url for the linkedin badge script, this is optional and only needed if you want to use a different script other than the one used in LinkedIn's badge documentation `(https://platform.linkedin.com/badges/js/profile.js)`
  */
@@ -21,2 +22,3 @@ export declare type LinkedInBadgeProps = {
     id: string;
+    script_src: string;
     name: string;
@@ -23,0 +25,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

21378

increased by9.5%

Lines of code

193

increased by3.21%

Number of lines in readme file

81

increased by68.75%

No dependency changes