# recontrib

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

Latest version **0.3.1** (published 2019-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install recontrib
pnpm add recontrib
yarn add recontrib
bun add recontrib
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2019-05-19 |
| First published | 2019-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 74.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Harshit Pant |
| Maintainers | pantharshit00 |

## Links

- npm: https://www.npmjs.com/package/recontrib
- Repository: https://github.com/pantharshit00/recontrib
- Homepage: https://pantharshit00.github.io/recontrib
- Issues: https://github.com/pantharshit00/recontrib/issues
- npm.io page: https://npm.io/package/recontrib

## Dependencies (3)

- [dayjs](https://npm.io/package/dayjs.md) ^1.8.14
- [@reach/portal](https://npm.io/package/@reach/portal.md) ^0.2.1
- [@reach/tooltip](https://npm.io/package/@reach/tooltip.md) ^0.2.0

## Recent versions

- 0.3.1 (latest) — 2019-05-19
- 0.3.0 — 2019-05-18
- 0.2.1 — 2019-05-18
- 0.2.0 — 2019-05-17
- 0.1.0 — 2019-05-17

## README

# Recontrib

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

![image](https://user-images.githubusercontent.com/22195362/57941632-17990f80-78ed-11e9-86b3-939f7ac1209b.png)

## Usuage

1. Add the Reach UI tooltip CSS

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

2. Use the component and pass the data

```js
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):

```ts
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

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

---

MIT️ ©️ [Harshit Pant](https://twitter.com/pantharshit00) 2019

---
_Source: https://npm.io/package/recontrib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._