Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/grubersjoe/react-activity-calendar
A flexible React component to display activity data in a calendar (heatmap).
https://github.com/grubersjoe/react-activity-calendar
calendar component react storybook
Last synced: 1 day ago
JSON representation
A flexible React component to display activity data in a calendar (heatmap).
- Host: GitHub
- URL: https://github.com/grubersjoe/react-activity-calendar
- Owner: grubersjoe
- License: mit
- Created: 2021-06-14T20:09:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-24T19:02:09.000Z (8 days ago)
- Last Synced: 2025-01-26T18:37:13.596Z (6 days ago)
- Topics: calendar, component, react, storybook
- Language: TypeScript
- Homepage: https://grubersjoe.github.io/react-activity-calendar/
- Size: 18.7 MB
- Stars: 423
- Watchers: 4
- Forks: 33
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Activity Calendar
[](https://github.com/grubersjoe/react-activity-calendar/actions/workflows/test.yml)
A flexible React component to display activity data in a calendar (heatmap).
**[Documentation (Storybook)](https://grubersjoe.github.io/react-activity-calendar)**
## Installation
```shell
npm install react-activity-calendar
```
## 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](https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--activity-levels)).
It is up to you how to generate and classify your data.
```tsx
import { ActivityCalendar } from 'react-activity-calendar'
const data = [
{
date: '2024-06-23',
count: 2,
level: 1,
},
{
date: '2024-08-02',
count: 16,
level: 4,
},
{
date: '2024-11-29',
count: 11,
level: 3,
},
]
;
```
## FAQ
### Why does the calendar not render in environment x?
If you encounter issues rendering this component in a specific React framework, please refer to the
following repository. It contains working examples for Astro, Next.js, Remix and Vite. Server side
rendering (SSR) is supported.
[Framework examples](https://github.com/grubersjoe/react-activity-calendar-tests)
### Why is Create React App unsupported?
Create React App (CRA) is considered
[abandoned](https://github.com/facebook/create-react-app/discussions/11086), and you probably should
not use it anymore (more
[background](https://github.com/facebook/create-react-app/issues/11180#issuecomment-874748552)).
Using this component inside CRA will lead to errors for reasons described in issue
[#105](https://github.com/grubersjoe/react-activity-calendar/issues/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](https://vitejs.dev/) instead of CRA.
### Why is the tooltip library x unsupported?
It seems impossible to support all kinds of tooltip libraries since they are all implemented
differently. See this [issue](https://github.com/grubersjoe/react-activity-calendar/issues/32) and
especially this
[comment](https://github.com/grubersjoe/react-activity-calendar/issues/32#issuecomment-1735208729).
The next major version will be based on a headless approach for tooltips, so that styling is
completely up to the user.
## Development
### Start the Storybook
```shell
npm run storybook
```
### Update the documentation
```shell
npm run build:storybook
```
## Related projects
- [grubersjoe/react-github-calendar](https://github.com/grubersjoe/react-github-calendar)
- [grubersjoe/github-contributions-api](https://github.com/grubersjoe/github-contributions-api)