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

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.

pnpm install
pnpm dev

Open http://localhost:3000.

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

pnpm run deploy