A React component to display a 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

npm install react-github-calendar

import { GitHubCalendar } from 'react-github-calendar'; <GitHubCalendar username="grubersjoe" />

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.

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.

Start watch mode for the library first:

npm install npm dev

Then start watch mode of example page:

cd example npm install npm dev

Open http://localhost:3000.

npm publish --dry-run # When you're happy npm publish --access=public

npm run deploy