Preact GitHub Calendar

preact-github-calendar is a small (1.3kb brotli) component library used for displaying a user's contribution calendar from GitHub. This component comes with customization options that you can use for making the component better adhere to the style of your application. Requests for additional customization options are always welcome.

Try out the demo!

Install

``
$ yarn add preact-github-calendar
`

Usage

`jsx
import GitHubCalendar from 'preact-github-calendar';
import 'preact-github-calendar/style.css';

export default function App() {
return ;
}
`

API

All options are entirely optional, no need to provide the options prop if you have no wish to customize anything. These only override the defaults; if you like the display, no need to change anything!

$3

Type: number

Default: 2

Sets the margin to be used between the blocks in the component. This affects both the vertical and horizontal margins.

$3

Type: number

Default: 12

Sets the size of the blocks in the component. This affects both the vertical and horizontal dimensions.

$3

Type: ['', '', '', '', '']

Default: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']

Changes the color spread in the calendar. The first item in the array replaces the color for least commits, and the last item replaces the color for most commits. Like the labelColor option, keywords, RGB(A) and HSL(A) values are all supported as valid colors. Default is GitHub's color scheme.

$3

Type: number

Default: 14

Changes the font size of the month and days of the week labels.

$3

Type: boolean

Default: true

Show a tooltip when hovering over calendar elements. Shows the number of contributions and the date for the element.

$3

Type: boolean

Default: false`

Add the week day labels to the left axis of the graph.

License

MIT © Ryan Christian