Skip to content

wolforest/react-activity-calendar

 
 

Repository files navigation

React Activity Calendar

CI

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

Screenshot

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 91.7%
  • SCSS 3.3%
  • JavaScript 2.8%
  • CSS 2.2%