{"id":14962241,"url":"https://github.com/sudhanva-nadiger/react-leetcode","last_synced_at":"2025-09-11T23:17:33.078Z","repository":{"id":223081550,"uuid":"758093051","full_name":"Sudhanva-Nadiger/react-leetcode","owner":"Sudhanva-Nadiger","description":"Leetcode components to showcase in your portfolio built with reactπŸŽ‰βœ¨","archived":false,"fork":false,"pushed_at":"2024-06-23T04:40:40.000Z","size":748,"stargazers_count":11,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T14:33:17.921Z","etag":null,"topics":["leetcode","npm-package","reactjs","tailwind-css","vite"],"latest_commit_sha":null,"homepage":"https://react-leetcode-exampple.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sudhanva-Nadiger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-15T16:01:23.000Z","updated_at":"2025-02-09T11:56:19.000Z","dependencies_parsed_at":"2024-03-17T05:39:45.808Z","dependency_job_id":"22af8635-a9fe-4fc7-9ac2-8be2e0a9f3a0","html_url":"https://github.com/Sudhanva-Nadiger/react-leetcode","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":"0.018867924528301883","last_synced_commit":"56fa86aba37a18f510f3dfe4fe2bb7f2e9436b43"},"previous_names":["sudhanva-nadiger/react-leetcode"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sudhanva-Nadiger/react-leetcode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sudhanva-Nadiger%2Freact-leetcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sudhanva-Nadiger%2Freact-leetcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sudhanva-Nadiger%2Freact-leetcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sudhanva-Nadiger%2Freact-leetcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sudhanva-Nadiger","download_url":"https://codeload.github.com/Sudhanva-Nadiger/react-leetcode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sudhanva-Nadiger%2Freact-leetcode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274726332,"owners_count":25338392,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leetcode","npm-package","reactjs","tailwind-css","vite"],"created_at":"2024-09-24T13:29:45.943Z","updated_at":"2025-09-11T23:17:33.052Z","avatar_url":"https://github.com/Sudhanva-Nadiger.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Leetcode\n\nCollection 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)\n\n## Demo\n\n[Example Website](https://react-leetcode-exampple.vercel.app/)\n\n\u003cimg src=\"https://github.com/Sudhanva-Nadiger/react-leetcode/assets/93595710/a7744333-3449-40e4-bd3a-0cedd265af6e\" width=\"350\" /\u003e\n\nComplete blog: [my-experience-publishing-first-npm-package](https://sudhanva-nadiger-blogs.hashnode.dev/my-experience-publishing-first-npm-package)\n\n## Features\n\n- πŸ“ˆ Clean and simple LeetCode stats, as reusable components\n- 🎨 Customizable themes and styles\n- πŸŽ‰ Fully customizable using CSS \n- πŸ€ Open source - [MIT License](./LICENSE)\n- βš™οΈ Extended-Components: `activity`, `contest`, `heatmap` and `recent-submission`\n\n## Installation\n\nWith npm:\n\n```bash\nnpm install react-leetcode\n```\n\nWith Yarn:\n\n```bash\nyarn add react-leetcode\n```\n\n## Usage\n\nEach Component has their own default properties. You can overwrite the defaults by passing props into the loaders.\n\n### Example\n\n```tsx\nimport { UserProfileDetails } from \"react-leetcode\";\n\nfunction App() {\n return (\n \u003cdiv className=\"w-full flex justify-center items-center\"\u003e\n \u003cUserProfileDetails userName=\"sudhanva_nadiger__\" /\u003e\n \u003c/div\u003e\n );\n}\n\nexport default App;\n```\n\n## Component Props\n\n### UserProfilDetails Props\n| Name | Type | Default Value | Description |\n|------------------|---------------------------------|--------------------------------------------|-----------------------------------------------------------------------------------------|\n| `userName` | `string` | - | The username for which the profile details will be fetched and displayed. |\n| `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. |\n| `loadingComponent` | `ReactNode` | - | A custom loading component to be displayed while fetching data. |\n| `showRank` | `boolean` | `true` | Indicates whether to display the user's rank. |\n| `hideLocation` | `boolean` | `false` | Indicates whether to hide the user's location information. |\n| `hideSchool` | `boolean` | `false` | Indicates whether to hide the user's school information. |\n| `hideWebsite` | `boolean` | `false` | Indicates whether to hide the user's website information. |\n| `hideSkills` | `boolean` | `false` | Indicates whether to hide the user's skills information. |\n| `hideCompany` | `boolean` | `false` | Indicates whether to hide the user's company information. \n| `ref` | `React.Ref\u003cHTMLDivElement\u003e` | - | The ref to attach to the component's root element. |\n\n### UserSolvedProblemsStats \u0026 UserHeatMap Props\n\n| Name | Type | Default Value | Description |\n|-------------------|------------------------------------|----------------------------------|-----------------------------------------------------------------------------------------------------------------------|\n| `userName` | `string` | - | The username of the user. |\n| `loadingComponent`| `React.ReactNode` | - | Custom loading component to be displayed. |\n| `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. \n| `showUserName` | `boolean` | `true` | Flag indicating whether to show the user's name. |\n| `ref` | `React.Ref\u003cHTMLDivElement\u003e` | - | The ref to attach to the component's root element. |\n\n### UserRecentSubmission \u0026 UserContestInfo Props\n\n| Name | Type | Default Value | Description |\n|-----------------------|------------------------------------|----------------------------------|-----------------------------------------------------------------------------------------------------------------------|\n| `userName` | `string` | - | The username of the user. |\n| `loadingComponent` | `JSX.Element` | - | The loading component to display. |\n| `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. |\n| `ref` | `React.Ref\u003cHTMLDivElement\u003e` | - | The ref to attach to the component's root element. |\n\n- If you dont provide loading component the default loader will appear\n```tsx\n\u003cdiv id=\"loading_container\" className=\"flex flex-col\"\u003e\n \u003cdiv id=\"loading_dots_container\" className=\"flex items-center justify-center gap-2 animate-pulse\"\u003e\n \u003cdiv className=\"w-1 h-1 bg-gray-600 rounded-full\" /\u003e\n \u003cdiv className=\"w-1 h-1 bg-gray-600 rounded-full\" /\u003e\n \u003cdiv className=\"w-1 h-1 bg-gray-600 rounded-full\" /\u003e\n \u003c/div\u003e\n \u003cp id=\"loading_text\" className=\"text-[10px] text-white font-bold text-center ml-[12px]\"\u003eLoading...\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Note\nIf you simply use this component it will throw `CORS` error.\n - While developing setup the proxy.\n\n - Ex: Incase you are using vite for your react project add this to `vite.config.ts`:\n```ts\nimport { defineConfig } from 'vitest/config';\nimport react from '@vitejs/plugin-react';\nexport default defineConfig({\n plugins: [react()],\n\n // Add this part to your config file\n server: {\n open: true,\n cors: true,\n proxy: {\n '/leetcode': {\n target: 'https://leetcode.com/graphql',\n changeOrigin: true,\n secure: false,\n rewrite: (path) =\u003e path.replace(/^\\/leetcode/, '')\n },\n }\n },\n})\n```\n\n- While deploying the website you should configure reverse proxy from the deployment platform.\n- Ex: If you are deploying your site in vercel add `vercel.json` file to the roor of your project folder with this content.\n```json\n// vercel.json\n{\n \"rewrites\": [\n {\n \"source\": \"/leetcode\",\n \"destination\": \"https://leetcode.com/graphql\"\n }\n ]\n}\n```\n\n\n## Development\n- clone the repo\n```bash\ngit clone https://github.com/Sudhanva-Nadiger/react-leetcode.git\n```\n- Install the packages\n```bash\nnpm install\n#or\nyarn install\n```\n\n- To run example website\n```bash\ncd example\n\nnpm run dev\n#or\nyarn dev\n```\n\n## Testing\nThis package uses [Vitest](https://vitest.dev) and [React-Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n\n- Run the test\n```bash\nnpm run test\n#or\nyarn test\n```\n\n\n## Contributing\nIf you would like to contribute to this project, please follow these steps:\n\n- Fork the repo\n- Clone the repo `git clone https://github.com/Sudhanva-Nadiger/react-leetcode.git`\n- Create your feature branch (`git checkout -b feature/YourFeature`)\n- Commit your changes (`git commit -am 'Add some feature'`)\n- Push to the branch (`git push origin feature/YourFeature`)\n- Create a new Pull Request\n\n## License\n`react-leetcode` is released under the MIT license. \n\u003cbr /\u003e\nIts free to use for any projects. No attribution required. \n\u003cbr /\u003e\nBut hey, let me know if you do. I'd love to see your portfolio.\n\n## References\n1. [React](https://react.dev)\n2. [Vite](https://vite.dev)\n3. [Tailwindcss](https://tailwindcss.com)\n4. [Vitest](https://vitest.dev)\n5. [Leetcode-Stats-Card](https://github.com/JacobLinCool/LeetCode-Stats-Card)\n6. [Leetcode-Query](https://github.com/JacobLinCool/LeetCode-Query)\n7. [Create-library-fast-blog](https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma)\n8. [Testing-blog](https://medium.com/@masbagaspn/unit-testing-react-application-with-vitest-and-react-testing-library-910f6f4dc675)\n\n## Thank You\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudhanva-nadiger%2Freact-leetcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsudhanva-nadiger%2Freact-leetcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudhanva-nadiger%2Freact-leetcode/lists"}