React GitHub Calendar

A React component to display your GitHub contributions calendar based on react-activity-calendar and github-contributions-api.

Version 5 has been released 🎉
See the list of breaking changes.

Demo and documentation

Installation

npm install react-github-calendar

Usage

import { GitHubCalendar } from 'react-github-calendar';

<GitHubCalendar username="grubersjoe" />

FAQ

Is server side rendering (SSR) supported?

Yes. However, not with this component because it fetches data client-side. For SSR support, you can fetch the GitHub contribution data from a suitable API server-side and pass it on to the internally used react-activity-calendar component. See the source code as example and the GitHub color theme.

Why is Create React App unsupported?

Create React App (CRA) is considered abandoned, and you probably should not use it anymore (more background). Using this component inside CRA will lead to errors for reasons described in issue #105 of react-activity-calendar. This repo is not for CRA support questions. If you encounter issues, you need to fix those yourself given the maintenance state of CRA. Personally, I would recommend using Vite instead of CRA. It offers everything that CRA does and more.

Development

pnpm install
pnpm dev

Open http://localhost:3000.

Publish a new release

pnpm publish --dry-run
# then
pnpm publish --access=public

Update demo page

pnpm run deploy