This is a custom react component that allows you to use LinkedIn badges 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.
- Install the package using npm or yarn
npm install react-linkedinbadgeor
yarn 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`
style={{ width: '300px', height: '300px' }}
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>