git-contrib-graph

A lightweight JS library to display your GitHub contribution graph anywhere — plain HTML, React, or any frontend setup.

Installation

Install my-project with npm

    npm install git-contrib-graph

Usage/Examples

REACT

import { useEffect } from "react";
import GitContribGraph from "git-contrib-graph";

export default function GitGraph() {
  useEffect(() => {
    const graph = new GitContribGraph({
      username: "Pisceszaiby",
      container: "#graph",
      theme: "github",
    });
    graph.render();
  }, []);

  return <div id="graph"></div>;
}

HTML

<div id="graph"></div>

<script type="module">
  import GitContribGraph from "git-contrib-graph";

  const graph = new GitContribGraph({
    username: "Pisceszaiby",
    container: "#graph",
    theme: "ocean"
  });

  graph.render();
</script>

Options

| Option | Type | Default | Description | |--------|------|----------|-------------| | username | string | — | GitHub username | | container | string | — | Target selector or element | | theme | string | "github" | Built-in themes: github, ocean, halloween, pink | | year | number | current year | Year to fetch data for | | cellSize | number | 12 | Pixel size of each contribution cell | | cellGap | number | 3 | Space between cells |

Built-in themes:

| Theme | Description | |--------|-------------| | github | Classic green palette | | ocean | Blue shades | | halloween | Orange and yellow palette | | pink | Rosy pink tones |

Usage

const graph = new GitContribGraph({
  username: "Pisceszaiby",
  container: "#graph",
  theme: "pink"
});

MIT © Zainab Anwaar

Screenshots

GitHub Theme

Ocean Theme

Halloween Theme

Pink Theme