Visualized react component of git contribution

• Able to fetch 3 month of contributions maximum.
• This contribution is based on github "PUSH" events.
  • If you made 3 commit at 7 July and 4 commits at 8 July and pushed all commits at 8 July.
  • Git-Lawn recognizes that there's no commit on 7 July and 7 commits on 8 July.
• I will be working on these two issues, so please keep your eyes on 👀.

• Install by executing npm install git-lawn or yarn add git-lawn.
• Import by adding import { GitLawn } from 'git-lawn'.
• Use by adding <GitLawn />. Use username prop for fetch git contribution history

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
8.1.4
v17.2.0

If you have used CRA creating your application, you might have react-scripts depenency. This component requires react-scripts ^4.0.3 or under because of webpack issues. Please downgrade react-script if your current App is over ^5.0.0.

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install git-lawn

Or if you prefer using Yarn:

$ yarn add git-lawn

Here's an example of basic usage:

import React from "react";
import { GitLawn } from "git-lawn";

function MyApp() {
  const GITHUB_USERNAME = "username of Github whom you want to fetch";
  return (
    <div>
      <GitLawn username={GITHUB_USERNAME} />
    </div>
  );
}

GitLawn Displays git contributions of specific user.

Props

Props Type Specification

type ColorType = "GREEN" | "BLUE";

type MonthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

type GrassShape = "Rectangle" | "Circle";