react-linkedinbadge - npm Package Compare versions

Comparing version 4.0.2 to 5.1.0

lib/bundle.esm.d.ts

@@ -25,4 +25,27 @@ import React from 'react';
 };
+/**
+ * React component that renders a LinkedIn badge on a website.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.locale="en_US"] - The locale to use for the badge.
+ * @param {("medium"|"large")} [props.size="medium"] - The size of the badge.
+ * @param {("light"|"dark")} [props.theme="light"] - The theme of the badge.
+ * @param {("VERTICAL"|"HORIZONTAL")} [props.type="VERTICAL"] - The orientation of the badge.
+ * @param {string} [props.vanity="☯liu"] - The vanity name or URL to display on the badge.
+ * @param {("v1"|"v2")} [props.version="v1"] - The version of the badge to use.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge container.
+ * @param {React.CSSProperties} [props.style] - Inline styles to apply to the badge container.
+ * @param {string} [props.id] - The ID to assign to the badge container.
+ * @param {string} [props.script_src] - The URL of an external script to include for the badge.
+ * @param {string} [props.name] - The name to display on the badge.
+ * @returns {React.ReactElement} The rendered LinkedIn badge component.
+ * @description This implementation uses two React components - LinkedInBadge and LIRenderAll.
+ * LinkedInBadge is the parent component responsible for
+ * rendering the container and basic structure of the LinkedIn badge,
+ * while LIRenderAll is a child component that handles
+ * the rendering and management of the actual badge content.
+ * @argument The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the LIRenderAll component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
+ */
 declare function LinkedInBadge(props: Partial<LinkedInBadgeProps>): React.JSX.Element;
 
 export { type LinkedInBadgeProps, LinkedInBadge as default };

lib/index.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import React from "react";
 /**
@@ -24,3 +24,26 @@ * LinkedInBadge component props used by LinkedInBadge component to render the LinkedIn badge
 };
+/**
+ * React component that renders a LinkedIn badge on a website.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.locale="en_US"] - The locale to use for the badge.
+ * @param {("medium"|"large")} [props.size="medium"] - The size of the badge.
+ * @param {("light"|"dark")} [props.theme="light"] - The theme of the badge.
+ * @param {("VERTICAL"|"HORIZONTAL")} [props.type="VERTICAL"] - The orientation of the badge.
+ * @param {string} [props.vanity="☯liu"] - The vanity name or URL to display on the badge.
+ * @param {("v1"|"v2")} [props.version="v1"] - The version of the badge to use.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge container.
+ * @param {React.CSSProperties} [props.style] - Inline styles to apply to the badge container.
+ * @param {string} [props.id] - The ID to assign to the badge container.
+ * @param {string} [props.script_src] - The URL of an external script to include for the badge.
+ * @param {string} [props.name] - The name to display on the badge.
+ * @returns {React.ReactElement} The rendered LinkedIn badge component.
+ * @description This implementation uses two React components - LinkedInBadge and LIRenderAll.
+ * LinkedInBadge is the parent component responsible for
+ * rendering the container and basic structure of the LinkedIn badge,
+ * while LIRenderAll is a child component that handles
+ * the rendering and management of the actual badge content.
+ * @argument The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the LIRenderAll component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
+ */
 export default function LinkedInBadge(props: Partial<LinkedInBadgeProps>): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -1,2 +0,26 @@
-import React from 'react';
+import React from "react";
+import LIRenderAll from "./LIRenderAll";
+/**
+ * React component that renders a LinkedIn badge on a website.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.locale="en_US"] - The locale to use for the badge.
+ * @param {("medium"|"large")} [props.size="medium"] - The size of the badge.
+ * @param {("light"|"dark")} [props.theme="light"] - The theme of the badge.
+ * @param {("VERTICAL"|"HORIZONTAL")} [props.type="VERTICAL"] - The orientation of the badge.
+ * @param {string} [props.vanity="☯liu"] - The vanity name or URL to display on the badge.
+ * @param {("v1"|"v2")} [props.version="v1"] - The version of the badge to use.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge container.
+ * @param {React.CSSProperties} [props.style] - Inline styles to apply to the badge container.
+ * @param {string} [props.id] - The ID to assign to the badge container.
+ * @param {string} [props.script_src] - The URL of an external script to include for the badge.
+ * @param {string} [props.name] - The name to display on the badge.
+ * @returns {React.ReactElement} The rendered LinkedIn badge component.
+ * @description This implementation uses two React components - LinkedInBadge and LIRenderAll.
+ * LinkedInBadge is the parent component responsible for
+ * rendering the container and basic structure of the LinkedIn badge,
+ * while LIRenderAll is a child component that handles
+ * the rendering and management of the actual badge content.
+ * @argument The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the LIRenderAll component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
+ */
 export default function LinkedInBadge(props) {
@@ -12,33 +36,23 @@ const locale = props.locale || "en_US";
     const url = `https://www.linkedin.com/in/${vanityEncoded}?trk=profile-badge`;
+    const refForDivBadge = React.useRef(null);
     const [componentDidMount, setComponentDidMount] = React.useState(false);
+    const [badgeDidRender, setBadgeDidRender] = React.useState(false);
     React.useEffect(() => {
-        // append the linkedin badge script to the body if it hasn't been appended yet
+        // check if div is rendered via ref
         if (!componentDidMount) {
-            // first check if the script has already been added by id
-            const id = props.id || "linkedin-badge-script";
-            if (!document.getElementById(id)) {
-                const script = document.createElement("script");
-                script.id = id;
-                script.src = props.script_src || "https://platform.linkedin.com/badges/js/profile.js";
-                script.async = true;
-                script.defer = true;
-                document.body.appendChild(script);
+            if (refForDivBadge.current) {
+                console.info("div rendered");
                 setComponentDidMount(true);
             }
             else {
-                // re-render the script by removing and re-adding it
-                const script = document.getElementById(id);
-                script?.remove();
-                const newScript = document.createElement("script");
-                newScript.id = id;
-                newScript.src = props.script_src || "https://platform.linkedin.com/badges/js/profile.js";
-                newScript.async = true;
-                newScript.defer = true;
-                document.body.appendChild(newScript);
-                setComponentDidMount(true);
+                console.info("div not rendered yet");
             }
         }
-    }, [componentDidMount, props.id]);
-    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)));
+    }, [componentDidMount, refForDivBadge]);
+    return (React.createElement("div", { ref: refForDivBadge, 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,
+            " ",
+            React.createElement(LIRenderAll, { ...props, badges: refForDivBadge.current ? [refForDivBadge.current] : undefined, badgeDidRender: badgeDidRender, setBadgeDidRender: setBadgeDidRender }))));
 }

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",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})}));
+!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";const n=e=>{const[n,o]=t.useState(e.scripts||[]),[i,d]=t.useState(e.badgeDidRender||!1),[r,s]=t.useState(e.responsesReceived||0),[c,l]=t.useState(e.expectedResponses||0),u=e.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",m=e.CALLBACK_NAME||"LIBadgeCallback",[p,f]=t.useState(e.badges||null);console.info("RECIEVE DBADGES",p,e.badges,e);const b=e.trackingParam||"trk=profile-badge",g=e.childScripts||{},h=t.useCallback(((e,t)=>{let i,d;s(r+1);for(const n of p||[])if(console.info("BADGE",n),d=n.getAttribute("data-iscreate"),i=parseInt(n.getAttribute("data-uid")||"0",10),i===t){var l=`<body>${e}</body>`;const t=document.createElement("iframe");t.onload=function(){var e=t.contentWindow?.document.body;t.setAttribute("height",`${(e?.scrollHeight||300)+5}`),t.setAttribute("width",`${e?.scrollWidth||335}`)};const a=(e,t)=>{const n=e.querySelectorAll("script");let a,o,i;for(a=0,o=n.length;a<o;a++)if(i=n[a],A(i,t)){var d=R(i);e.appendChild(d),e.removeChild(i)}};t.setAttribute("frameBorder","0"),t.style.display="block",n.appendChild(t),t.contentWindow&&(t.contentWindow.document.open(),t.contentWindow.document.write(l),t.contentWindow.document.close()),a(n,d)}a(r,c,p,n,m,o)}),[p,r,a]),y=t.useCallback((e=>{var t=document.createElement("script");t.src=e;const a=n;a.push(t),t.id=`${m}-${a.length+1}`,o(a),document.body.appendChild(t)}),[n]),v=t.useCallback((t=>{const n=e.size||t.getAttribute("data-size")||"medium",a=e.locale||t.getAttribute("data-locale")||"en_US",o=e.type||t.getAttribute("data-type")||"VERTICAL",i=e.theme||t.getAttribute("data-theme")||"dark",d=e.vanity||t.getAttribute("data-vanity")||"☯liu",r=e.version||t.getAttribute("data-version")||"v1",s=t.hasAttribute("data-ei")||!1,c=t.getAttribute("data-entity")||"PROFILE",l=t.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let m,p=function(e){var t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),f=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(o),"badgetheme="+encodeURIComponent(i),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(r)];if("v2"===r){p+="view",f.push("badgesize="+encodeURIComponent(n||"medium")),f.push("entity="+encodeURIComponent(c||"PROFILE"));const e=(e=>Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`})))(t);f=f.concat(e)}else p+="profile",f.push("maxsize="+encodeURIComponent(n)),f.push("trk="+encodeURIComponent(b)),f.push("vanityname="+encodeURIComponent(d));l&&f.push("fromCreate=true"),m=p+"?"+f.join("&"),t.setAttribute("data-uid",`${u}`),y(m)}),[e.size,e.locale,e.type,e.theme,e.vanity,e.version,e.trackingParam,y]),A=(e,t)=>C(e)&&!g[e.src]&&(!t||t&&!e.getAttribute("data-isartdeco")),C=e=>"SCRIPT"===e.tagName,R=e=>{for(var t=document.createElement("script"),n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};return t.useEffect((()=>{if(null===p&&f(Array.prototype.slice.call(document.querySelectorAll(u))),p&&!1===i&&p.length>0)for(const t of p||[]){t.getAttribute("data-rendered")||(l(c+1),t.setAttribute("data-rendered","true"),v(t),d(!0),e.setBadgeDidRender&&e.setBadgeDidRender(!0),window[m]=h)}}),[p,u,v,h,c,d,e,i]),t.createElement(t.Fragment,null)};function a(e,t,n,a,o,i){if(e>=t&&t>0||e>=(n?.length||0)){delete window[o];a.map((function(e){document.body.removeChild(e)})),i([])}}e.default=function(e){const a=e.locale||"en_US",o=e.size||"medium",i=e.theme||"light",d=e.type||"VERTICAL",r=e.vanity||"☯liu",s=e.version||"v1",c=encodeURIComponent(r),l=e.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,m=t.useRef(null),[p,f]=t.useState(!1),[b,g]=t.useState(!1);return t.useEffect((()=>{p||(m.current?(console.info("div rendered"),f(!0)):console.info("div not rendered yet"))}),[p,m]),t.createElement("div",{ref:m,className:"badge-base LI-profile-badge"+(e.className?` ${e.className}`:""),style:e.style,"data-locale":a,"data-size":o,"data-theme":i,"data-type":d,"data-vanity":r,"data-version":s},t.createElement("a",{className:"badge-base__link LI-simple-link",href:u},l," ",t.createElement(n,{...e,badges:m.current?[m.current]:void 0,badgeDidRender:b,setBadgeDidRender:g})))},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",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))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t=t=>{const[a,o]=e.useState(t.scripts||[]),[r,i]=e.useState(t.badgeDidRender||!1),[d,s]=e.useState(t.responsesReceived||0),[c,l]=e.useState(t.expectedResponses||0),u=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",m=t.CALLBACK_NAME||"LIBadgeCallback",[p,b]=e.useState(t.badges||null);console.info("RECIEVE DBADGES",p,t.badges,t);const f=t.trackingParam||"trk=profile-badge",g=t.childScripts||{},h=e.useCallback(((e,t)=>{let r,i;s(d+1);for(const n of p||[])if(console.info("BADGE",n),i=n.getAttribute("data-iscreate"),r=parseInt(n.getAttribute("data-uid")||"0",10),r===t){var l=`<body>${e}</body>`;const t=document.createElement("iframe");t.onload=function(){var e=t.contentWindow?.document.body;t.setAttribute("height",`${(e?.scrollHeight||300)+5}`),t.setAttribute("width",`${e?.scrollWidth||335}`)};const a=(e,t)=>{const n=e.querySelectorAll("script");let a,o,r;for(a=0,o=n.length;a<o;a++)if(r=n[a],A(r,t)){var i=R(r);e.appendChild(i),e.removeChild(r)}};t.setAttribute("frameBorder","0"),t.style.display="block",n.appendChild(t),t.contentWindow&&(t.contentWindow.document.open(),t.contentWindow.document.write(l),t.contentWindow.document.close()),a(n,i)}n(d,c,p,a,m,o)}),[p,d,n]),v=e.useCallback((e=>{var t=document.createElement("script");t.src=e;const n=a;n.push(t),t.id=`${m}-${n.length+1}`,o(n),document.body.appendChild(t)}),[a]),y=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",a=t.locale||e.getAttribute("data-locale")||"en_US",o=t.type||e.getAttribute("data-type")||"VERTICAL",r=t.theme||e.getAttribute("data-theme")||"dark",i=t.vanity||e.getAttribute("data-vanity")||"☯liu",d=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,c=e.getAttribute("data-entity")||"PROFILE",l=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let m,p=function(e){var t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),b=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(o),"badgetheme="+encodeURIComponent(r),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(d)];if("v2"===d){p+="view",b.push("badgesize="+encodeURIComponent(n||"medium")),b.push("entity="+encodeURIComponent(c||"PROFILE"));const t=(e=>Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`})))(e);b=b.concat(t)}else p+="profile",b.push("maxsize="+encodeURIComponent(n)),b.push("trk="+encodeURIComponent(f)),b.push("vanityname="+encodeURIComponent(i));l&&b.push("fromCreate=true"),m=p+"?"+b.join("&"),e.setAttribute("data-uid",`${u}`),v(m)}),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,t.trackingParam,v]),A=(e,t)=>C(e)&&!g[e.src]&&(!t||t&&!e.getAttribute("data-isartdeco")),C=e=>"SCRIPT"===e.tagName,R=e=>{for(var t=document.createElement("script"),n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};return e.useEffect((()=>{if(null===p&&b(Array.prototype.slice.call(document.querySelectorAll(u))),p&&!1===r&&p.length>0)for(const e of p||[]){e.getAttribute("data-rendered")||(l(c+1),e.setAttribute("data-rendered","true"),y(e),i(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),window[m]=h)}}),[p,u,y,h,c,i,t,r]),e.createElement(e.Fragment,null)};function n(e,t,n,a,o,r){if(e>=t&&t>0||e>=(n?.length||0)){delete window[o];a.map((function(e){document.body.removeChild(e)})),r([])}}exports.default=function(n){const a=n.locale||"en_US",o=n.size||"medium",r=n.theme||"light",i=n.type||"VERTICAL",d=n.vanity||"☯liu",s=n.version||"v1",c=encodeURIComponent(d),l=n.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,m=e.useRef(null),[p,b]=e.useState(!1),[f,g]=e.useState(!1);return e.useEffect((()=>{p||(m.current?(console.info("div rendered"),b(!0)):console.info("div not rendered yet"))}),[p,m]),e.createElement("div",{ref:m,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":a,"data-size":o,"data-theme":r,"data-type":i,"data-vanity":d,"data-version":s},e.createElement("a",{className:"badge-base__link LI-simple-link",href:u},l," ",e.createElement(t,{...n,badges:m.current?[m.current]:void 0,badgeDidRender:f,setBadgeDidRender:g})))};
 //# 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",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};
+import e from"react";const t=t=>{const[a,o]=e.useState(t.scripts||[]),[i,r]=e.useState(t.badgeDidRender||!1),[d,s]=e.useState(t.responsesReceived||0),[c,l]=e.useState(t.expectedResponses||0),u=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",m=t.CALLBACK_NAME||"LIBadgeCallback",[p,b]=e.useState(t.badges||null);console.info("RECIEVE DBADGES",p,t.badges,t);const f=t.trackingParam||"trk=profile-badge",g=t.childScripts||{},h=e.useCallback(((e,t)=>{let i,r;s(d+1);for(const n of p||[])if(console.info("BADGE",n),r=n.getAttribute("data-iscreate"),i=parseInt(n.getAttribute("data-uid")||"0",10),i===t){var l=`<body>${e}</body>`;const t=document.createElement("iframe");t.onload=function(){var e=t.contentWindow?.document.body;t.setAttribute("height",`${(e?.scrollHeight||300)+5}`),t.setAttribute("width",`${e?.scrollWidth||335}`)};const a=(e,t)=>{const n=e.querySelectorAll("script");let a,o,i;for(a=0,o=n.length;a<o;a++)if(i=n[a],v(i,t)){var r=R(i);e.appendChild(r),e.removeChild(i)}};t.setAttribute("frameBorder","0"),t.style.display="block",n.appendChild(t),t.contentWindow&&(t.contentWindow.document.open(),t.contentWindow.document.write(l),t.contentWindow.document.close()),a(n,r)}n(d,c,p,a,m,o)}),[p,d,n]),y=e.useCallback((e=>{var t=document.createElement("script");t.src=e;const n=a;n.push(t),t.id=`${m}-${n.length+1}`,o(n),document.body.appendChild(t)}),[a]),A=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",a=t.locale||e.getAttribute("data-locale")||"en_US",o=t.type||e.getAttribute("data-type")||"VERTICAL",i=t.theme||e.getAttribute("data-theme")||"dark",r=t.vanity||e.getAttribute("data-vanity")||"☯liu",d=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,c=e.getAttribute("data-entity")||"PROFILE",l=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let m,p=function(e){var t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),b=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(o),"badgetheme="+encodeURIComponent(i),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(d)];if("v2"===d){p+="view",b.push("badgesize="+encodeURIComponent(n||"medium")),b.push("entity="+encodeURIComponent(c||"PROFILE"));const t=(e=>Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`})))(e);b=b.concat(t)}else p+="profile",b.push("maxsize="+encodeURIComponent(n)),b.push("trk="+encodeURIComponent(f)),b.push("vanityname="+encodeURIComponent(r));l&&b.push("fromCreate=true"),m=p+"?"+b.join("&"),e.setAttribute("data-uid",`${u}`),y(m)}),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,t.trackingParam,y]),v=(e,t)=>C(e)&&!g[e.src]&&(!t||t&&!e.getAttribute("data-isartdeco")),C=e=>"SCRIPT"===e.tagName,R=e=>{for(var t=document.createElement("script"),n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};return e.useEffect((()=>{if(null===p&&b(Array.prototype.slice.call(document.querySelectorAll(u))),p&&!1===i&&p.length>0)for(const e of p||[]){e.getAttribute("data-rendered")||(l(c+1),e.setAttribute("data-rendered","true"),A(e),r(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),window[m]=h)}}),[p,u,A,h,c,r,t,i]),e.createElement(e.Fragment,null)};function n(e,t,n,a,o,i){if(e>=t&&t>0||e>=(n?.length||0)){delete window[o];a.map((function(e){document.body.removeChild(e)})),i([])}}function a(n){const a=n.locale||"en_US",o=n.size||"medium",i=n.theme||"light",r=n.type||"VERTICAL",d=n.vanity||"☯liu",s=n.version||"v1",c=encodeURIComponent(d),l=n.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,m=e.useRef(null),[p,b]=e.useState(!1),[f,g]=e.useState(!1);return e.useEffect((()=>{p||(m.current?(console.info("div rendered"),b(!0)):console.info("div not rendered yet"))}),[p,m]),e.createElement("div",{ref:m,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":a,"data-size":o,"data-theme":i,"data-type":r,"data-vanity":d,"data-version":s},e.createElement("a",{className:"badge-base__link LI-simple-link",href:u},l," ",e.createElement(t,{...n,badges:m.current?[m.current]:void 0,badgeDidRender:f,setBadgeDidRender:g})))}export{a 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",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(!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 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=
+!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";
+/**
+   * Renders all LinkedIn badges on the page,
+   * By default is called when document is at readyState 'complete'
+   */
+/**
+   * React child component responsible for rendering and managing the LinkedIn badge.
+   *
+   * @param {Object} props - Component props.
+   * @param {HTMLScriptElement[]} [props.scripts=[]] - Array of script elements to include for the badge.
+   * @param {number} [props.responsesReceived=0] - The number of responses received from the server.
+   * @param {number} [props.expectedResponses=0] - The expected number of responses from the server.
+   * @param {Object} [props.childScripts={}] - An object containing child script URLs as keys and their loaded states as values.
+   * @param {string} [props.BADGE_NAMES=".LI-profile-badge, .LI-entity-badge"] - CSS selector for badge elements.
+   * @param {string} [props.CALLBACK_NAME="LIBadgeCallback"] - The name of the callback function to handle server responses.
+   * @param {Element[]|null} [props.badges=null] - Array of badge elements to render.
+   * @param {string} [props.trackingParam="trk=profile-badge"] - The tracking parameter to include in the badge URL.
+   * @param {Function} [props.setBadgeDidRender] - Callback function to set the badge rendering state.
+   * @param {boolean} [props.badgeDidRender=false] - Flag indicating whether the badge has been rendered.
+   * @returns {React.ReactElement} The rendered LinkedIn badge child component.
+   * @abstract The LIRenderAll component uses various hooks and callbacks to manage the state and lifecycle of the badge rendering process. It keeps track of the number of expected and received responses from the server, handles the insertion of the badge content into the appropriate container, and manages the replacement of any script tags within the badge markup. As mentioned in the description for the LinkedInBadge React Custom Component, LIRenderAll is a child component that handles the rendering and management of the actual badge content.
+   * @note The LinkedInBadge component, on the other hand, is responsible for rendering the container element with the appropriate props and attributes, as well as passing down the necessary props to the LIRenderAll child component. It also manages its own state related to component mounting and badge rendering. This separation of concerns allows for a more modular and maintainable codebase, where the responsibilities of rendering the badge container and managing the dynamic badge content are clearly separated.
+   */const t=t=>{const[a,o]=e.useState(t.scripts||[]),[i,d]=e.useState(t.badgeDidRender||!1),[r,s]=e.useState(t.responsesReceived||0),[c,l]=e.useState(t.expectedResponses||0),u=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",m=t.CALLBACK_NAME||"LIBadgeCallback",[p,f]=e.useState(t.badges||null);console.info("RECIEVE DBADGES",p,t.badges,t);const b=t.trackingParam||"trk=profile-badge",g=t.childScripts||{},h=e.useCallback(((e,t)=>{let i,d;
+// responsesReceived++;
+s(r+1);// max possible height
+for(const n of p||[])if(console.info("BADGE",n),
+// isCreate needed to prevent reloading artdeco script tag
+d=n.getAttribute("data-iscreate"),i=parseInt(n.getAttribute("data-uid")||"0",10),i===t){var l=`<body>${e}</body>`;const t=document.createElement("iframe");t.onload=function(){var e=t.contentWindow?.document.body;
+// 5 px buffer to avoid the badge border being cut off.
+t.setAttribute("height",`${(e?.scrollHeight||300)+5}`),t.setAttribute("width",`${e?.scrollWidth||335}`)};
+// Implementation of replaceScriptTags function goes here
+const a=(e,t)=>{const n=e.querySelectorAll("script");let a,o,i;for(a=0,o=n.length;a<o;a++)if(i=n[a],A(i,t)){var d=w(i);e.appendChild(d),e.removeChild(i)}};t.setAttribute("frameBorder","0"),t.style.display="block",n.appendChild(t),t.contentWindow&&(t.contentWindow.document.open(),t.contentWindow.document.write(l),t.contentWindow.document.close()),a(n,d)}n(r,c,p,a,m,o)}),[p,r,n]),y=e.useCallback((e=>{var t=document.createElement("script");t.src=e;
+// scripts.push(script);
+const n=a;n.push(t),t.id=`${m}-${n.length+1}`,o(n),document.body.appendChild(t)}),[a]),v=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",a=t.locale||e.getAttribute("data-locale")||"en_US",o=t.type||e.getAttribute("data-type")||"VERTICAL",i=t.theme||e.getAttribute("data-theme")||"dark",d=t.vanity||e.getAttribute("data-vanity")||"☯liu",r=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,c=e.getAttribute("data-entity")||"PROFILE",l=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let m,p=function(e){var t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}
+/**
+   * Tries to clean added tags
+   **/(s),f=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(o),"badgetheme="+encodeURIComponent(i),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(r)];if("v2"===r){p+="view",f.push("badgesize="+encodeURIComponent(n||"medium")),f.push("entity="+encodeURIComponent(c||"PROFILE"));const t=(e=>Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`})))(e);f=f.concat(t)}else p+="profile",f.push("maxsize="+encodeURIComponent(n)),f.push("trk="+encodeURIComponent(b)),f.push("vanityname="+encodeURIComponent(d));l&&f.push("fromCreate=true"),m=p+"?"+f.join("&"),e.setAttribute("data-uid",`${u}`),y(m)}//Calls responseHandler when done
+),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,t.trackingParam,y]),A=(e,t)=>C(e)&&!g[e.src]&&(!t||t&&!e.getAttribute("data-isartdeco")),C=e=>"SCRIPT"===e.tagName,w=e=>{for(var t=document.createElement("script"),n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};
+// Gets all incoming responses
+/*
+       * Makes Jsonp request, responses handles by CALLBACK_NAME
+       * @param url String: url of server to make request to
+       */
+//Keeps track of child scripts to render
+//  Array.prototype.slice.call(document.querySelectorAll(
+//    state.BADGE_NAMES
+// ));
+return e.useEffect((()=>{if(null===p&&f(Array.prototype.slice.call(document.querySelectorAll(u))),p&&!1===i&&p.length>0)for(const e of p||[]){e.getAttribute("data-rendered")||(l(c+1),e.setAttribute("data-rendered","true"),v(e),d(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),window[m]=h)}}),[p,u,v,h,c,d,t,i]),e.createElement(e.Fragment,null)};function n(e,t,n,a,o,i){if(e>=t&&t>0||e>=(n?.length||0)){delete window[o];a.map((function(e){document.body.removeChild(e)})),i([])}}
+/**
+   * React component that renders a LinkedIn badge on a website.
+   *
+   * @param {Object} props - Component props.
+   * @param {string} [props.locale="en_US"] - The locale to use for the badge.
+   * @param {("medium"|"large")} [props.size="medium"] - The size of the badge.
+   * @param {("light"|"dark")} [props.theme="light"] - The theme of the badge.
+   * @param {("VERTICAL"|"HORIZONTAL")} [props.type="VERTICAL"] - The orientation of the badge.
+   * @param {string} [props.vanity="☯liu"] - The vanity name or URL to display on the badge.
+   * @param {("v1"|"v2")} [props.version="v1"] - The version of the badge to use.
+   * @param {string} [props.className] - Additional CSS classes to apply to the badge container.
+   * @param {React.CSSProperties} [props.style] - Inline styles to apply to the badge container.
+   * @param {string} [props.id] - The ID to assign to the badge container.
+   * @param {string} [props.script_src] - The URL of an external script to include for the badge.
+   * @param {string} [props.name] - The name to display on the badge.
+   * @returns {React.ReactElement} The rendered LinkedIn badge component.
+   * @description This implementation uses two React components - LinkedInBadge and LIRenderAll.
+   * LinkedInBadge is the parent component responsible for
+   * rendering the container and basic structure of the LinkedIn badge,
+   * while LIRenderAll is a child component that handles
+   * the rendering and management of the actual badge content.
+   * @argument The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the LIRenderAll component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
+   */function a(n){const a=n.locale||"en_US",o=n.size||"medium",i=n.theme||"light",d=n.type||"VERTICAL",r=n.vanity||"☯liu",s=n.version||"v1",c=encodeURIComponent(r),l=n.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,m=e.useRef(null),[p,f]=e.useState(!1),[b,g]=e.useState(!1);return e.useEffect((()=>{
+// check if div is rendered via ref
+p||(m.current?(console.info("div rendered"),f(!0)):console.info("div not rendered yet"))}),[p,m]),e.createElement("div",{ref:m,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":a,"data-size":o,"data-theme":i,"data-type":d,"data-vanity":r,"data-version":s},e.createElement("a",{className:"badge-base__link LI-simple-link",href:u},l," ",e.createElement(t,{...n,badges:m.current?[m.current]:void 0,badgeDidRender:b,setBadgeDidRender:g})))}"undefined"!=typeof window&&void 0===window.LinkedInBadge&&(window.LinkedInBadge=a)}));
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=

package.json

 {
   "name": "react-linkedinbadge",
-  "version": "4.0.2",
+  "version": "5.1.0",
   "description": "Embedded LinkedIn Badges via React fast Reactions as if all your linkedin accounts are being restricted in React-not time",
-
   "repository": {
@@ -21,5 +20,4 @@ "type": "git",
     "test": "echo \"Error: no test specified\" && exit 1",
-
     "build": "npm run build:roll && npm run build:roll:cdn",
-     "build:roll:cdn": "rollup --bundleConfigAsCjs -c rollup.config.js",
+    "build:roll:cdn": "rollup --bundleConfigAsCjs -c rollup.config.js",
     "build:roll": "tsc -p tsconfig.json && rollup -c rollup.config.all.js --bundleConfigAsCjs",
@@ -41,3 +39,3 @@ "prepublishOnly": "npm run build",
   "author": "Ziping Liu <[e-mail]>",
-  "license": "UNLICENSED",
+  "license": "SEE LICENSE IN LINKEDINLIU.LICENSE.md",
   "devDependencies": {
@@ -84,2 +82,2 @@ "@babel/cli": "^7.18.10",
   "module": "./lib/linkedinbadge.esm.js"
-}
+}

README.md

@@ -1,14 +0,31 @@
-## What is This?
-This is a custom react component that allows you to use [LinkedIn badges](https://www.linkedin.com/badges/profile/create?vanityname=%E2%98%AFliu&preferredlocale=en_US&trk=public_profile_badge&source=ziping.org) within your react application with ease. It essentially wraps the LinkedIn badge code in a react component and handles all the necessary script loading, and element mounting for you.
 
-## How to Use
-1. Install the package using npm or yarn
+# LinkedIn Badge Rendering React Component
+
+This is a React component that renders a LinkedIn badge on a website, allowing users to display their LinkedIn profile information or company details. It is an improved implementation of LinkedIn's provided code for embedding profile badges on a site.
+
+## Features
+
+- Renders LinkedIn badges with customizable options (locale, size, theme, type, vanity, version)
+- Supports both profile badges and entity badges (e.g., company badges) **NOTE: USAGE OF THIS COMPANENT BY LINKEDIN EMPLOYEES IS PROHIBITED AND THUS MAY NOT BE USED, REFERENCED, OR USED AS INSPIRATION FOR ANY LINKEDIN EMPLOYEE UNLESS WITH THE EXPRESSED CONTRACTUAL AGREEMTN BY THE AUTHOR OF THIS SOFTWARE, PLEASE SEE LICENSE IN [LINKEDINLIU.LICENSE.md](LINKEDINLIU.LICENSE.md) FOR MORE INFORMATION**
+- Separates badge container rendering from dynamic badge content rendering for better code organization
+- Handles asynchronous loading of badge content from LinkedIn's servers
+- Allows for easy management and rendering of as many badges as needed on a page given the containerized approach in rendering the badge
+- Manages the lifecycle of script tags injected for badge rendering through a robust react state management system
+- Provides a callback function to track when the badge has finished rendering
+### Improvements Over LinkedIn's Implementation
+This implementation improves upon LinkedIn's provided [implementation](https://platform.linkedin.com/badges/js/profile.js) in several notable ways that no longer undergo the same kind of common issues that can be seen when utilzing LinkedIn's basic javascript injection method.
+- It provides more customization options, such as size, theme, type, and version.
+- It supports multiple badges on the same page.
+- It handles asynchronous loading of badge content from the server.
+- It has a modular design with clear separation of concerns, making it easier to maintain and extend.
+
+## Installation
+
+To use this component in your React application, you can install it as an npm package or simply copy the source files into your project.
+
 ```bash
-npm install react-linkedinbadge
+npm install linkedin-badge-react
 ```
-or
-```bash
-yarn add react-linkedinbadge
-```
 
+
 ### Example Usage
@@ -77,2 +94,51 @@ ```tsx
 
+## How it Works
+
+<details><summary>This implementation uses two React components: `LinkedInBadge` and `LIRenderAll`.
+</summary>
+
+ `LinkedInBadge` is the parent component responsible for rendering the container and basic structure of the LinkedIn badge, while `LIRenderAll` is a child component that handles the rendering and management of the actual badge content.
+
+The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the `LIRenderAll` component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
+</details>
+
+### `LinkedInBadge`
+
+The `LinkedInBadge` component is the parent component responsible for rendering the container and basic structure of the LinkedIn badge. It accepts the props mentioned above and passes them down to the `LIRenderAll` child component. It also manages its own state related to component mounting and badge rendering.
+
+### `LIRenderAll`
+
+The `LIRenderAll` component is a child component that handles the rendering and management of the actual badge content. It is responsible for making requests to LinkedIn's servers to fetch the badge data and rendering the badge content within an `<iframe>` element.
+
+The component uses various hooks and callbacks to manage the state and lifecycle of the badge rendering process. It keeps track of the number of expected and received responses from the server, handles the insertion of the badge content into the appropriate container, and manages the replacement of any script tags within the badge markup.
+
+The separation of concerns between `LinkedInBadge` and `LIRenderAll` allows for a more modular and maintainable codebase, where the responsibilities of rendering the badge container and managing the dynamic badge content are clearly separated.
+
+## Improvements over LinkedIn's Implementation
+
+This implementation improves upon LinkedIn's provided code in the following ways:
+
+1. **Separation of Concerns**: The code separates the rendering of the badge container (`LinkedInBadge`) from the rendering and management of the dynamic badge content (`LIRenderAll`). This separation makes the codebase more modular and maintainable.
+
+2. **State Management**: The component uses React hooks to manage the state of badge rendering, script loading, and response handling, making the code more readable and easier to understand.
+
+3. **Lifecycle Management**: The component hooks into the appropriate lifecycle methods to ensure proper rendering and cleanup of the badge and related scripts.
+
+4. **Callback Function**: A callback function (`setBadgeDidRender`) is provided to track when the badge has finished rendering, allowing for additional actions or updates to be performed after the badge rendering is complete.
+
+5. **Code Organization**: The code is organized into separate functions and components, with clear responsibilities and improved readability.
+
+6. **JSDoc Comments**: Detailed JSDoc comments are provided for better understanding and documentation of the code.
+
+7. **Prop Handling**: The component handles optional props and provides default values for missing props, improving flexibility and ease of use.
+
+8. **Error Handling**: Improved error handling and validation are implemented throughout the code to ensure better reliability and robustness.
+
+## Contributing
+
+Contributions to this project are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the project's GitHub repository.
+
+## License
+See license in [LINKEDINLIU.LICENSE.md](LINKEDINLIU.LICENSE.md)
+
 ### Links
@@ -82,2 +148,3 @@ - [NPM Package](https://www.npmjs.com/package/react-linkedinbadge)
 - [GitHub Repository](https://github.com/ziping-liu-corporation/react-linkedin)
-- [LinkedIn Badge Creation](https://www.linkedin.com/badges/profile/create?vanityname=%E2%98%AFliu&preferredlocale=en_US&trk=public_profile_badge&source=ziping.org)
+- [LinkedIn Badge Creation](https://www.linkedin.com/badges/profile/create?vanityname=%E2%98%AFliu&preferredlocale=en_US&trk=public_profile_badge&source=ziping.org)
+- [JSDELIVR CDN](https://www.jsdelivr.com/package/npm/react-linkedinbadge)

types/index.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import React from "react";
 /**
@@ -24,3 +24,26 @@ * LinkedInBadge component props used by LinkedInBadge component to render the LinkedIn badge
 };
+/**
+ * React component that renders a LinkedIn badge on a website.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.locale="en_US"] - The locale to use for the badge.
+ * @param {("medium"|"large")} [props.size="medium"] - The size of the badge.
+ * @param {("light"|"dark")} [props.theme="light"] - The theme of the badge.
+ * @param {("VERTICAL"|"HORIZONTAL")} [props.type="VERTICAL"] - The orientation of the badge.
+ * @param {string} [props.vanity="☯liu"] - The vanity name or URL to display on the badge.
+ * @param {("v1"|"v2")} [props.version="v1"] - The version of the badge to use.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge container.
+ * @param {React.CSSProperties} [props.style] - Inline styles to apply to the badge container.
+ * @param {string} [props.id] - The ID to assign to the badge container.
+ * @param {string} [props.script_src] - The URL of an external script to include for the badge.
+ * @param {string} [props.name] - The name to display on the badge.
+ * @returns {React.ReactElement} The rendered LinkedIn badge component.
+ * @description This implementation uses two React components - LinkedInBadge and LIRenderAll.
+ * LinkedInBadge is the parent component responsible for
+ * rendering the container and basic structure of the LinkedIn badge,
+ * while LIRenderAll is a child component that handles
+ * the rendering and management of the actual badge content.
+ * @argument The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the LIRenderAll component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
+ */
 export default function LinkedInBadge(props: Partial<LinkedInBadgeProps>): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73238

increased by242.59%

Number of package files

21

increased by31.25%

Lines of code

739

increased by282.9%

Number of lines in readme file

148

increased by82.72%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes