Leetcode components to showcase in your portfolio built with reactπβ¨
MIT License
Collection of components for showcasing your leetcode profile in your portfolio β¨. Built with React, TailwindCss and Vite
Complete blog: my-experience-publishing-first-npm-package
activity
, contest
, heatmap
and recent-submission
With npm:
npm install react-leetcode
With Yarn:
yarn add react-leetcode
Each Component has their own default properties. You can overwrite the defaults by passing props into the loaders.
import { UserProfileDetails } from "react-leetcode";
function App() {
return (
<div className="w-full flex justify-center items-center">
<UserProfileDetails userName="sudhanva_nadiger__" />
</div>
);
}
export default App;
Name | Type | Default Value | Description |
---|---|---|---|
userName |
string |
- | The username for which the profile details will be fetched and displayed. |
theme |
{ primaryColor?: string; secondaryColor?: string; bgColor?: string; } |
{ primaryColor: "rgba(34,211,238,1)", secondaryColor: "rgba(209,213,219,1)", bgColor: "rgba(68,64,60,1)" } |
An object defining the colors for the profile details component. |
loadingComponent |
ReactNode |
- | A custom loading component to be displayed while fetching data. |
showRank |
boolean |
true |
Indicates whether to display the user's rank. |
hideLocation |
boolean |
false |
Indicates whether to hide the user's location information. |
hideSchool |
boolean |
false |
Indicates whether to hide the user's school information. |
hideWebsite |
boolean |
false |
Indicates whether to hide the user's website information. |
hideSkills |
boolean |
false |
Indicates whether to hide the user's skills information. |
hideCompany |
boolean |
false |
Indicates whether to hide the user's company information. |
ref |
React.Ref<HTMLDivElement> |
- | The ref to attach to the component's root element. |
Name | Type | Default Value | Description |
---|---|---|---|
userName |
string |
- | The username of the user. |
loadingComponent |
React.ReactNode |
- | Custom loading component to be displayed. |
theme |
{ primaryColor?: string; secondaryColor?: string; bgColor?: string; } |
{ primaryColor: "rgba(34,211,238,1)", secondaryColor: "rgba(209,213,219,1)", bgColor: "rgba(68,64,60,1)" } |
An object containing custom theme colors. |
showUserName |
boolean |
true |
Flag indicating whether to show the user's name. |
ref |
React.Ref<HTMLDivElement> |
- | The ref to attach to the component's root element. |
Name | Type | Default Value | Description |
---|---|---|---|
userName |
string |
- | The username of the user. |
loadingComponent |
JSX.Element |
- | The loading component to display. |
theme |
{ primaryColor?: string; secondaryColor?: string; bgColor?: string; } |
{ primaryColor: "rgba(34,211,238,1)", secondaryColor: "rgba(209,213,219,1)", bgColor: "rgba(68,64,60,1)" } |
The theme configuration object containing primaryColor, secondaryColor, and bgColor fields. |
ref |
React.Ref<HTMLDivElement> |
- | The ref to attach to the component's root element. |
<div id="loading_container" className="flex flex-col">
<div id="loading_dots_container" className="flex items-center justify-center gap-2 animate-pulse">
<div className="w-1 h-1 bg-gray-600 rounded-full" />
<div className="w-1 h-1 bg-gray-600 rounded-full" />
<div className="w-1 h-1 bg-gray-600 rounded-full" />
</div>
<p id="loading_text" className="text-[10px] text-white font-bold text-center ml-[12px]">Loading...</p>
</div>
If you simply use this component it will throw CORS
error.
While developing setup the proxy.
Ex: Incase you are using vite for your react project add this to vite.config.ts
:
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
// Add this part to your config file
server: {
open: true,
cors: true,
proxy: {
'/leetcode': {
target: 'https://leetcode.com/graphql',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/leetcode/, '')
},
}
},
})
vercel.json
file to the roor of your project folder with this content.// vercel.json
{
"rewrites": [
{
"source": "/leetcode",
"destination": "https://leetcode.com/graphql"
}
]
}
git clone https://github.com/Sudhanva-Nadiger/react-leetcode.git
npm install
#or
yarn install
cd example
npm run dev
#or
yarn dev
This package uses Vitest and React-Testing Library
npm run test
#or
yarn test
If you would like to contribute to this project, please follow these steps:
git clone https://github.com/Sudhanva-Nadiger/react-leetcode.git
git checkout -b feature/YourFeature
)git commit -am 'Add some feature'
)git push origin feature/YourFeature
)react-leetcode
is released under the MIT license.
Its free to use for any projects. No attribution required.
But hey, let me know if you do. I'd love to see your portfolio.