React-leetcode-calendar NPM

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

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