Skip to content

Latest commit

 

History

History
66 lines (48 loc) · 1.82 KB

README.md

File metadata and controls

66 lines (48 loc) · 1.82 KB
Raw

React Activity Calendar

CI

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

Screenshot

Documentation (Storybook)

Features

  • 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
  }
]

Caveats

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.

Development

Start the Storybook

npm run storybook

Update the documentation

npm run build:storybook

Related projects