React-Leetcode

Collection of components for showcasing your leetcode profile in your portfolio ✨. Built with React, TailwindCss and Vite

Demo

Example Website

Features

• 📈 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 and recent-submission

Installation

With npm:

npm install react-leetcode

With Yarn:

yarn add react-leetcode

Usage

Each Component has their own default properties. You can overwrite the defaults by passing props into the loaders.

Example

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;

Component Props

UserProfilDetails Props

| 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. |

UserSolvedProblemsStats & UserHeatMap Props

| 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. |

UserRecentSubmission & UserContestInfo Props

| 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>

Note

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"
      }
    ]
}

Development

• 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

Testing

This package uses Vitest and React-Testing Library

• Run the test

npm run test
#or
yarn test

Contributing

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

License

react-leetcode is released under the MIT license.

References

1. React
2. Vite
3. Tailwindcss
4. Vitest
5. Leetcode-Stats-Card
6. Leetcode-Query
7. Create-library-fast-blog
8. Testing-blog

Thank You