RSC Activity Calendar

A flexible RSC to display activity data in a calendar (heatmap).

Documentation (Storybook)

Installation

npm install rsc-activity-calendar

Data source

The library doesn't include data fetching to avoid forcing you to use a specific data source or HTTP library.

Here's a snippet you might find helpful:

const getCachedContributions = unstable_cache(
  async () => {
    const response = await fetch('https://github-contributions-api.jogruber.de/v4/<username>');
    const data = (await response.json()) as Response;
    const total = data.total[new Date().getFullYear()];

    return { contributions: data.contributions, total };
  },
  ['github-contributions'],
  { revalidate: 60 * 60 * 24 },
);

If you don't want to use github-contributions-api.jogruber.de or find it not working, you can self-host it here: grubersjoe/github-contributions-api

Features

• any number of activity levels 📈
• color themes 🌈
• localization 🌍

The component expects activity data in the following structure. Each activity level must be in the interval from 0 to maxLevel, which is 4 per default (see documentation).

It is up to you how to generate and classify your data.

[
  {
    "date": "2023-06-14",
    "count": 2,
    "level": 1
  },
  {
    "date": "2023-06-22",
    "count": 16,
    "level": 3
  }
]

Development

Start the Storybook

npm run dev

Update the documentation

npm run build:storybook

Related projects

• grubersjoe/react-github-calendar
• grubersjoe/github-contributions-api