react-linkedinbadge
v5.1.2027
Published
The LinkedIn Badge Rendering React Component is a powerful tool for displaying LinkedIn badges on websites. With customizable options and support for both profile and entity badges, this component offers improved features over LinkedIn's basic implementat
Downloads
509
Maintainers
liullcKeywords
Readme
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 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.
DEMO
[!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.
Utilizling Linkedin's methods instead with this Com ponent
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.
Installation
[!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-linkedinbadgeExample Usage
import 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>
);
};CDN
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>Architecture and Implementation
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.
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:
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.
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