RSC to display activity data in calendar
npm install rsc-activity-calendar
A flexible RSC to display activity data in a calendar (heatmap).
``shell
npm install rsc-activity-calendar
`
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:
`ts
const getCachedContributions = unstable_cache(
async () => {
const response = await fetch('https://github-contributions-api.jogruber.de/v4/
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.
`json`
[
{
"date": "2023-06-14",
"count": 2,
"level": 1
},
{
"date": "2023-06-22",
"count": 16,
"level": 3
}
]
`shell`
npm run dev
`shell``
npm run build:storybook
- grubersjoe/react-github-calendar
- grubersjoe/github-contributions-api