Git-Lawn

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

TL;DR

• 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

Prerequisites

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.

Getting Started

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.

Installation

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

Usage

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>
  );
}

User Guide

GitLawn Displays git contributions of specific user.

Props

| Prop name | Description | Required | Default Value | Type | | ---------- | --------------------------------------------------------------------------------------------- | ---------- | ------------- | ------------ | | username | Github username you want to fetch contributions | Required | - | string | | grassSpan | Pixel of each components of days. You can adjust the whole component size with this property. | Optional | 30 | number | | color | Color theme of this component. | Optional | "GREEN" | ColorType | | month | How much monthes you want to display. (For now, it is possible under 3 months) | Optional | 3 | MonthType | | darkmode | If you want to use dark theme. | Optional | false | boolean | | grassShape | Shapes of each contribution of days. | Optional | "Rectangle" | GrassShape |

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";