Preact GitHub Calendar

Preact-GitHub-Calendar is a lightweight and extensible component for preact . It was designed to be a more lightweight alternative to the existing React implementations.

Installation

$ yarn add preact-github-calendar

General Usage

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

export default function App() {
    return <GitHubCalendar username="rschristian" />
}

API Options

• contributionColorArray

Type: ['<color>', '<color>', '<color>', '<color>', '<color>']

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.

<GitHubCalendar username="rschristian" options={{ contributionColorArray: ["var(--calendar-day-0)", "#9ba1e9", "#4040c4", "#3030a1", "#21216e"] }} />

• labelFontSize

Type: number

Default: 14

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

<GitHubCalendar username="rschristian" options={{ labelFontSize: 20 }} />

• showLabels

Type: boolean

Default: true

Add calendar month and weekday labels to the axis

<GitHubCalendar username="rschristian" options={{ showLabels: false }} />

• showTooltip

Type: boolean

Default: true

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

<GitHubCalendar username="rschristian" options={{ showTooltip: false }} />