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 to any website.
[!TIP] FEATURES
- Renders LinkedIn badges with customizable options (locale, size, theme, type, vanity, version), as well as now further parameteres that were not exposed due to limitations of not having yet implemented such forms of customizable optoins via LinkedIn's official badge rendering method which can clearly be specifiec now as part of the component's props.
- Supports both profile badges and entity badges (e.g., company badges), as well as badges that can be configured beyond the current options provided from LinkedIn's implemenation.
- Separates badge container rendering from dynamic badge content rendering for better code organization, and allows for aynconous and non-blocking rendering of multiple badges due to the nature of Linkedin"s own method having utilized a global param in handling the rendering of mulitple badges, that does not take into count how some badges may not appear on the page the same time as others (thus such badges would then miss the global train for rending).
[!IMPORTANT] The usage of this component by LinkedIn employees is not allowed. It should not be referenced or used as inspiration without the author's contractual agreement. For complete details, do review the license which explicilty provides detailed terms regarding the disallowance of usage with this component by any means in any assocations from commercial and/or for-profit entities.
[!CAUTION] Don't just take my word for it regarding the descriped improvements made. See the demo of this in action, viewable here.
- Clearly see the measurable difference in the now more robost and controllable rendering of the LinkedIn Badge compared to LinkedIn's method based on its official instructions.
Version 4.0 or lower utilizes LinkedIn's script to render the badge. I recommend using version 4 or lower in case you require rendering via LinkedIn's method in any means. Version 4 by the means is a version that has issues or functionality flaws, and is a stable legacy version of the component. Version 5.0 given that it fully integrates rendering within the component and thus utilizes fully adherence toward React's lifecycle methods and state management system, provides even fuller abilities in allowing the badge to properly render and animate utilizing any other React component's or libraries within your project.
[!IMPORTANT] To use this component in your React application, you can install it as a NPM, or yarn package or simply copy the source files into your project.
npm install react-linkedinbadgeyarn add react-linkedinbadgeimport React from 'react';
import LinkedInBadge from 'react-linkedinbadge';
const App = () => {
return (
<div>
<LinkedInBadge
vanity="your-linkedin-vanity" // the vanity is the part of your LinkedIn profile URL that comes after the last forward slash, e.g. for https://www.linkedin.com/in/your-vanity, the vanity is `your-vanity`
id="MyLinkedInBadge" // id is only required if you want to load more than one badge on the same page
size="large"
theme="light"
type="vertical"
/>
</div>
);
};You can also load this component via CDN by adding the following script tag to your HTML file:
<script src="https://cdn.jsdelivr.net/npm/react-linkedinbadge@4/lib/linkedinbadge.min.js"></script>You then can use it from the global scope, via the variable LinkedInBadge from your window object. Be sure to also load React and ReactDOM before using this component in your html file and thus before loading the linkedinbadge.min.js script.
Full example:
<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>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.
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.
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.
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.
This implementation improves upon LinkedIn's provided code in the following ways:
-
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. -
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.
-
Lifecycle Management: The component hooks into the appropriate lifecycle methods to ensure proper rendering and cleanup of the badge and related scripts.
-
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. -
Code Organization: The code is organized into separate functions and components, with clear responsibilities and improved readability.
-
JSDoc Comments: Detailed JSDoc comments are provided for better understanding and documentation of the code.
-
Prop Handling: The component handles optional props and provides default values for missing props, improving flexibility and ease of use.
-
Error Handling: Improved error handling and validation are implemented throughout the code to ensure better reliability and robustness.
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.
See license in LINKEDINLIU.LICENSE.md