React Activity Calendar

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

Documentation (Storybook)

Features

• color themes 🌈
• dark & light mode ✨
• tooltips 🪧
• event handlers ⁉️
• localization 🌍

The component expects activity data with 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 storybook

Update the documentation

npm run build:storybook

Related projects

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