git-lawn-hackathon-url

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