React LeetCode Calendar 📅

Easily display a LeetCode submission calendar in your React projects! 🚀
This library provides a GitHub-like activity graph for LeetCode submissions.
Supports fetching and displaying daily coding activity with an auto-provided QueryClient (no extra setup required).

---

🌟 Features

✅ Auto-fetches LeetCode submission history
✅ Displays a visual calendar of coding activity
✅ Supports yearly and full-history views
✅ Zero configuration required for React Query
✅ Lightweight & Easy to Use

---

📦 Installation

Install the package using npm or yarn:

npm install react-leetcode-calendar

# or

yarn add react-leetcode-calendar

🚀 Usage

Example 1: Passing both username and graph props

import { Leetcodecalendar } from "react-leetcode-calendar";

const App = () => {
  return (
    <div style={{ background: "#101828", color: "white", display: "flex", justifyContent: "center" }}>
      <Leetcodecalendar username={"saurabhhh777"} graph={"yearly"} />
    </div>
  );
};

export default App;

👇 Example Output

Example 2: Passing only the username prop

import { Leetcodecalendar } from "react-leetcode-calendar";

const App = () => {
  return (
    <div style={{ background: "#101828", color: "white", display: "flex", justifyContent: "center" }}>
      <Leetcodecalendar username={"saurabhhh777"} />
    </div>
  );
};

export default App;

👇 Example Output

🎯 Props

Prop	Type	Default	Accepted Values	Description
username	string	Required	Any string	LeetCode username for fetching submissions
graph	string	"default"	"yearly", ""	"yearly" for last year's data, or omit to show full history

📊 How It Works?

• When graph="yearly" → The last 1 year of data from the current date will be displayed.
• When no graph prop is provided → It will automatically detect the first & last submission dates and display only that range.

🔗 Links

• Github Repo
• NPM Package

📜 License

This project is licensed under the MIT License.

⭐ Star this repo if you found it useful! 🚀 📢 Contributions & Issues are welcome!