Recontrib

React Component that implements GiHub's commit graph UI. https://pantharshit00.github.io/recontrib

Usage

1. Add the Reach UI tooltip CSS

import '@reach/tooltip/style.css';

2. Use the component and pass the data

const App = () => {
  return (
    <div>
      <Recontrib data={data} />
    </div>
  );
};

Data is structured as following. You can directly pass the data from the GitHub API(https://api.github.com/repos/:owner/:repo/stats/commit_activity):

interface WeekData {
  days: number[]; // commits in individual days in the week
  total: number; // total number commits in the week
  week: number; // Timestamp in seconds of the seconds of the starting of the week
}

Props

interface Props {
  data: Array<WeekData>; // data
  gridSize?: number; // size of the tile
  fontSize?: string; // fontSize of months and weekdays
}

---

MIT️ ©️ Harshit Pant 2019