A flexible React component to display activity data in a calendar (heatmap).
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
}
]
Server side rendering (SSR) is not supported because the component relies on various browser APIs.
For example, window.matchMedia()
is used to detect the user's preferred color scheme. Likewise,
the use client
directive is used as preparation for
React Server Components.
On the server null
will be rendered instead of the calendar.
npm run storybook
npm run build:storybook