A flexible React component to display activity data in a calendar (heatmap).
npm install react-activity-calendar- any number of activity levels 📈
- color themes 🌈
- dark & light mode ✨
- tooltips 🪧
- event handlers
⁉️ - 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
}
]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.
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. 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.
npm run storybooknpm run build:storybook