recontrib

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

Usage no npm install needed!

<script type="module">
  import recontrib from 'https://cdn.skypack.dev/recontrib';
</script>

README

Recontrib

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

image

Usuage

  1. Add the Reach UI tooltip CSS
import '@reach/tooltip/style.css';
  1. 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