Github Graph

The GithubGraph component is designed to display a GitHub contribution graph for a specified user. It uses the react-activity-calendar package to render the contribution graph.

Installation

npx v3cn add github

📈

Make sure that you have installed the dependencies and configured your project accordingly.

💻

Note: The code for the self-hosted API used to fetch contribution data is available here (opens in a new tab).

Usage

// Import the Component
import { GithubGraph } from "@/components/GithubGraph";
 
// Use the Component with custom props
<GithubGraph
  username="vineetagarwal-code" // your github username
  blockMargin={2}
  colorPallete={["#1e1e2f", "#5a3e7a", "#7e5aa2", "#a87cc3", "#d9a9e6"]}
/>;

Utility Function

The fetchContributionData function fetches contribution data from a specified API endpoint.

async function fetchContributionData(username: string): Promise<any> {
  let response = await fetch(`https://github.vineet.tech/api/${username}`);
  let responseBody = await response.json();
 
  if (!response.ok) {
    throw Error("Error fetching contribution data");
  }
  return responseBody.data;
}

GithubGraph Component Properties

Prop Name	Type	Description	Default Value
`username`	`string`	GitHub username for which to fetch the contribution data.	`""` (required)
`blockMargin`	`number`	Margin between blocks in the contribution graph.	`2`
`colorPallete`	`string[]`	Custom color scheme for the light theme.	`["#ebedf0", "#c6e48b", "#7bc96f", "#239a3b", "#196127"]`

Features

Display Contribution Graph: Shows a GitHub contribution graph for a specified user.
Customizable Themes: Allows users to set light and dark themes.
Loading Indicator: Shows a loading state while fetching data.

How to Use the Component

Import the GithubGraph component into your project:

import { GithubGraph } from "@/components/GithubGraph";

Add the component to your layout or any desired component, passing the necessary props:

<GithubGraph
  username="vineet"
  blockMargin={2}
  colorPallete={["#1e1e2f", "#5a3e7a", "#7e5aa2", "#a87cc3", "#d9a9e6"]}
/>

Customize the username, blockMargin, lightTheme, and darkTheme props as needed.

Code

"use client";
import { useCallback, useEffect, useState } from "react";
 
import Calendar, { Activity, ActivityCalendar } from "react-activity-calendar";
 
type GithubGraphProps = {
  username: string;
  blockMargin?: number;
  colorPallete?: string[];
};
 
export const GithubGraph = ({
  username,
  blockMargin,
  colorPallete,
}: GithubGraphProps) => {
  const [contribution, setContribution] = useState<Activity[]>([]);
  const [loading, setIsLoading] = useState<boolean>(true);
 
  const fetchData = useCallback(async () => {
    try {
      const contributions = await fetchContributionData(username);
      setContribution(contributions);
    } catch (error) {
      throw Error("Error fetching contribution data");
    } finally {
      setIsLoading(false);
    }
  }, [username]);
 
  useEffect(() => {
    fetchData();
  }, [fetchData]);
 
  const label = {
    totalCount: `{{count}} contributions in the last year`,
  };
 
  return (
    <>
      <ActivityCalendar
        data={contribution}
        maxLevel={4}
        blockMargin={blockMargin ?? 2}
        loading={loading}
        labels={label}
        theme={{
          dark: colorPallete ?? [
            "#ebedf0",
            "#9be9a8",
            "#40c463",
            "#30a14e",
            "#216e39",
          ],
        }}
      />
    </>
  );
};
async function fetchContributionData(username: string): Promise<Activity[]> {
  let response = await fetch(`https://github.vineet.tech/api/${username}`);
  let responseBody = await response.json();
 
  if (!response.ok) {
    throw Error("Erroring fetching contribution data");
  }
  return responseBody.data;
}

Discord