GitHub Contribution Calendar

A simple and customizable GitHub contribution calendar built with React. Visualizes your contributions for a given year using a color-coded calendar.

✰ Key Features

• Displays a GitHub contribution calendar for a specific year.
• Customizable appearance (cell size, themes, labels, etc.).
• Shows total contributions for the year.
• Tooltips with contribution count on hover.

☁️ Installation and Usage

1. Install the package:

npm install github-contribution-calendar

2. Import and use the GitHubCalendar component

import React from "react";
import { GitHubCalendar } from "github-contribution-calendar";

const App = () => (
  <div>
    <h1>My GitHub Contributions</h1>
    <GitHubCalendar
      username="github-username"
      token="YOUR_GITHUB_ACCESS_TOKEN"
      year={2024} // Optional: defaults to current year
      showLabels={true} // Optional
      fontSize={14} // Optional
      theme="forest" // Optional : defaults to "forest"
    />
  </div>
);

export default App;

⚙️ Available Properties

| Prop Name | Type | Default Value | Description | | ------------------------ | ------- | -------------------------- | -------------------------------------------------- | | token | string | Required | Your GitHub API access token. | | username | string | Required | The GitHub username to display contributions for. | | year | number | new Date().getFullYear() | The year to display contributions for. | | theme | string | "forest" | Themes or Custom colors for each contribution level. | | cellSize | number/string | 15 | Size of each calendar cell. | | showLabels | boolean | true | Whether to show month labels. | | background | string | "#ffffff" | Background color of the calendar. | | borderRadius | string | "0.4rem" | Border radius of the calendar's border container. | | labelColor | string | "#000000" | Color for month labels. | | showTotalContributions | boolean | true | Whether to show total contributions for the year. | | fontSize | number/string | 15 | Font size for total contributions text and labels. | | titleColor | string | "#000000" | Color for the title and total contributions text. |

🎨 Themes

Explore 12 Stunning Color Themes and 2 Fun Emoji Styles

1. Classic

2. Aurora

3. Velvet

4. Forest

5. Crimson

6. Solar

7. Prism

8. Galaxy

9. Pastel

10. Monotone

11. Prison

12. Chocolate

13. Honeymoon

14. Minecraft

Or Create your own Theme

import {GitHubCalendar} from "github-contribution-calendar"

function App() {
    const my_theme = {
        noContributions:"#F88379",
        low:"#FF6347",
        moderate:"##CD5700",
        high:"#A91101",
        veryHigh:"##7C3030"
    }

  return (
    <div className="App">
        <GitHubCalendar 
        username="github_username"
        token="YOUR_GITHUB_ACCESS_TOKEN" 
        theme="custom" // must be specified for custom theme to be applied 
        customTheme={my_theme}/>
    </div>
  );
}

export default App;