{"id":14985499,"url":"https://github.com/grubersjoe/react-activity-calendar","last_synced_at":"2025-04-13T12:41:30.776Z","repository":{"id":39685599,"uuid":"376943772","full_name":"grubersjoe/react-activity-calendar","owner":"grubersjoe","description":"A flexible React component to display activity data in a calendar (heatmap).","archived":false,"fork":false,"pushed_at":"2025-04-11T15:30:23.000Z","size":21269,"stargazers_count":454,"open_issues_count":9,"forks_count":37,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T05:09:57.407Z","etag":null,"topics":["calendar","component","react","storybook"],"latest_commit_sha":null,"homepage":"https://grubersjoe.github.io/react-activity-calendar/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grubersjoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-14T20:09:08.000Z","updated_at":"2025-04-10T03:35:46.000Z","dependencies_parsed_at":"2023-12-04T14:41:57.571Z","dependency_job_id":"aa12f97d-1f7c-4ba7-8e16-8fdb047fc81f","html_url":"https://github.com/grubersjoe/react-activity-calendar","commit_stats":{"total_commits":304,"total_committers":5,"mean_commits":60.8,"dds":"0.16118421052631582","last_synced_commit":"e26d042b49af76ee04e6b93447cb1a960189cde1"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grubersjoe%2Freact-activity-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grubersjoe%2Freact-activity-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grubersjoe%2Freact-activity-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grubersjoe%2Freact-activity-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grubersjoe","download_url":"https://codeload.github.com/grubersjoe/react-activity-calendar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248717095,"owners_count":21150387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","component","react","storybook"],"created_at":"2024-09-24T14:11:06.221Z","updated_at":"2025-04-13T12:41:30.756Z","avatar_url":"https://github.com/grubersjoe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Activity Calendar\n\n[![CI](https://github.com/grubersjoe/react-activity-calendar/actions/workflows/test.yml/badge.svg)](https://github.com/grubersjoe/react-activity-calendar/actions/workflows/test.yml)\n[![npm version](https://badge.fury.io/js/react-activity-calendar.svg)](https://www.npmjs.com/package/react-activity-calendar)\n\nA flexible React component to display activity data in a calendar (heatmap). \u003cbr\u003e\n**[Documentation (Storybook)](https://grubersjoe.github.io/react-activity-calendar)**\n\n![Screenshot](screenshot.png)\n\n## Installation\n\n```shell\nnpm install react-activity-calendar\n```\n\n## Features\n\n- any number of activity levels 📈\n- color themes 🌈\n- dark \u0026 light mode ✨\n- tooltips 🪧\n- event handlers ⁉️\n- localization 🌍\n\nThe component expects activity data in the following structure. Each activity level must be in the\ninterval from 0 to `maxLevel`, which is 4 per default (see\n[documentation](https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--activity-levels)).\nIt is up to you how to generate and classify your data.\n\n```tsx\nimport { ActivityCalendar } from 'react-activity-calendar'\n\nconst data = [\n  {\n    date: '2024-06-23',\n    count: 2,\n    level: 1,\n  },\n  {\n    date: '2024-08-02',\n    count: 16,\n    level: 4,\n  },\n  {\n    date: '2024-11-29',\n    count: 11,\n    level: 3,\n  },\n]\n\nfunction Calendar() {\n  return \u003cActivityCalendar data={data} /\u003e\n}\n```\n\n## FAQ\n\n### Why does the calendar not render in environment x?\n\nIf you encounter issues rendering this component in a specific React framework, please refer to the\nfollowing repository. It contains working examples for Astro, Next.js, Remix and Vite. Server side\nrendering (SSR) is supported.\n\n[Framework examples](https://github.com/grubersjoe/react-activity-calendar-tests)\n\n### Why is Create React App unsupported?\n\nCreate React App (CRA) is considered\n[abandoned](https://github.com/facebook/create-react-app/discussions/11086), and you probably should\nnot use it anymore (more\n[background](https://github.com/facebook/create-react-app/issues/11180#issuecomment-874748552)).\nUsing this component inside CRA will lead to errors for reasons described in issue\n[#105](https://github.com/grubersjoe/react-activity-calendar/issues/105). This repo is not for CRA\nsupport questions. If you encounter issues, you need to fix those yourself given the maintenance\nstate of CRA. Personally, I would recommend using [Vite](https://vitejs.dev/) instead of CRA.\n\n### Why is the tooltip library x unsupported?\n\nIt seems impossible to support all kinds of tooltip libraries since they are all implemented\ndifferently. See this [issue](https://github.com/grubersjoe/react-activity-calendar/issues/32) and\nespecially this\n[comment](https://github.com/grubersjoe/react-activity-calendar/issues/32#issuecomment-1735208729).\nThe next major version will be based on a headless approach for tooltips, so that styling is\ncompletely up to the user.\n\n## Development\n\n### Start the Storybook\n\n```shell\nnpm run storybook\n```\n\n### Update the documentation\n\n```shell\nnpm run build:storybook\n```\n\n## Related projects\n\n- [grubersjoe/react-github-calendar](https://github.com/grubersjoe/react-github-calendar)\n- [grubersjoe/github-contributions-api](https://github.com/grubersjoe/github-contributions-api)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrubersjoe%2Freact-activity-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrubersjoe%2Freact-activity-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrubersjoe%2Freact-activity-calendar/lists"}