Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sudhanva-nadiger/react-leetcode
Leetcode components to showcase in your portfolio built with react🎉✨
https://github.com/sudhanva-nadiger/react-leetcode
leetcode npm-package reactjs tailwind-css vite
Last synced: 4 months ago
JSON representation
Leetcode components to showcase in your portfolio built with react🎉✨
- Host: GitHub
- URL: https://github.com/sudhanva-nadiger/react-leetcode
- Owner: Sudhanva-Nadiger
- License: mit
- Created: 2024-02-15T16:01:23.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-06-23T04:40:40.000Z (7 months ago)
- Last Synced: 2024-10-10T12:04:34.027Z (4 months ago)
- Topics: leetcode, npm-package, reactjs, tailwind-css, vite
- Language: TypeScript
- Homepage: https://react-leetcode-exampple.vercel.app/
- Size: 730 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Leetcode
Collection of components for showcasing your leetcode profile in your portfolio ✨. Built with [React](https://react.dev), [TailwindCss](https://tailwindcss.com) and [Vite](https://vite.dev)
## Demo
[Example Website](https://react-leetcode-exampple.vercel.app/)
Complete blog: [my-experience-publishing-first-npm-package](https://sudhanva-nadiger-blogs.hashnode.dev/my-experience-publishing-first-npm-package)
## Features
- 📈 Clean and simple LeetCode stats, as reusable components
- 🎨 Customizable themes and styles
- 🎉 Fully customizable using CSS
- 🍀 Open source - [MIT License](./LICENSE)
- ⚙️ Extended-Components: `activity`, `contest`, `heatmap` and `recent-submission`
## Installation
With npm:
```bash
npm install react-leetcode
```
With Yarn:
```bash
yarn add react-leetcode
```
## Usage
Each Component has their own default properties. You can overwrite the defaults by passing props into the loaders.
### Example
```tsx
import { UserProfileDetails } from "react-leetcode";
function App() {
return (
);
}
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` | - | 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` | - | 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` | - | The ref to attach to the component's root element. |
- If you dont provide loading component the default loader will appear
```tsx
Loading...
```
## 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`:
```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.
```json
// vercel.json
{
"rewrites": [
{
"source": "/leetcode",
"destination": "https://leetcode.com/graphql"
}
]
}
```
## Development
- clone the repo
```bash
git clone https://github.com/Sudhanva-Nadiger/react-leetcode.git
```
- Install the packages
```bash
npm install
#or
yarn install
```
- To run example website
```bash
cd example
npm run dev
#or
yarn dev
```
## Testing
This package uses [Vitest](https://vitest.dev) and [React-Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- Run the test
```bash
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.
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.
## References
1. [React](https://react.dev)
2. [Vite](https://vite.dev)
3. [Tailwindcss](https://tailwindcss.com)
4. [Vitest](https://vitest.dev)
5. [Leetcode-Stats-Card](https://github.com/JacobLinCool/LeetCode-Stats-Card)
6. [Leetcode-Query](https://github.com/JacobLinCool/LeetCode-Query)
7. [Create-library-fast-blog](https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma)
8. [Testing-blog](https://medium.com/@masbagaspn/unit-testing-react-application-with-vitest-and-react-testing-library-910f6f4dc675)
## Thank You