Collection of components for showcasing your leetcode profile in your portfolio ✨. Built with React, TailwindCss and Vite
- 📈 Clean and simple LeetCode stats, as reusable components
- 🎨 Customizable themes and styles
- 🎉 Fully customizable using CSS
- 🍀 Open source - MIT License
- ⚙️ Extended-Components:
activity
,contest
,heatmap
andrecent-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. |
- If you dont provide loading component the default loader will appear
<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/, '')
},
}
},
})
- While deploying the website you should configure reverse proxy from the deployment platform.
- Ex: If you are deploying your site in vercel add
vercel.json
file to the roor of your project folder with this content.
// vercel.json
{
"rewrites": [
{
"source": "/leetcode",
"destination": "https://leetcode.com/graphql"
}
]
}
- clone the repo
git clone https://github.com/Sudhanva-Nadiger/react-leetcode.git
- Install the packages
npm install
#or
yarn install
- To run example website
cd example
npm run dev
#or
yarn dev
This package uses Vitest and React-Testing Library
- Run the test
npm run test
#or
yarn test
If you would like to contribute to this project, please follow these steps:
- Fork the repo
- Clone the repo
git clone https://github.com/Sudhanva-Nadiger/react-leetcode.git
- Create your feature branch (
git checkout -b feature/YourFeature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin feature/YourFeature
) - Create a new Pull Request
react-leetcode
is released under the MIT license.