React GitHub Calendar

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

Demo and documentation

Installation

npm install react-github-calendar

Usage

import GitHubCalendar from 'react-github-calendar';

const App = () => <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 for 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.

Development

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.

Publish a new release

npm publish --dry-run

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

Update demo page

npm run deploy