Version 5 of React GitHub Calendar introduces several breaking changes and a introduces a new approach to tooltips. Because this component supports all props of the underlying calendar component React Activity Calendar, all breaking changes from React Activity Calendar v3 also apply here.

Breaking changes

• React GitHub Calendar is now a pure ESM package.
• The default export has been removed. Use the named export instead:

  import { GitHubCalendar } from 'react-github-calendar'

• The eventHandlers prop has been removed. Use the renderBlock prop with React.cloneElement() to attach
  event handlers
• The totalCount prop has been removed, overriding the total count is no longer supported.
• The transformTotalCount prop has been removed, overriding the total count is no longer supported.
• The hideColorLegend prop has been renamed to showColorLegend.
• The hideMonthLabels prop has been renamed to showMonthLabels.
• The hideTotalCount prop has been renamed to showTotalCount.

Tooltips

Tooltips no longer depend on external libraries and are now integrated directly into the calendar package. Thanks to code-splitting, tooltips only affect your bundle size when you use them. They are implemented using the Floating UI library as a “headless” component, meaning they come without predefined styles. This gives you full control over the appearance:

• Import the default styles provided by React Activity Calendar, or
• Add your own custom CSS.

See the tooltips documentation of the calendar component for details and examples.

By default an error message is shown if fetching contribution data fails. Two properties have been added in this release to give you more control over error handling:

• errorMessage?: string
• throwOnError?: boolean, false per default

With errorMessage the default error message can be overwritten. If throwOnError is set to true the component will throw an error instead of rendering the error message so that React error boundaries can be used.

Thanks @marcelscruz for the suggestion!

Please read the release notes of react-activity-calendar v2. All the information there, especially about breaking changes, applies to this release as well.

You can register event handlers for the SVG <rect/> elements that are used to render the calendar days now. This way you can control the behaviour on click, hover, etc.

See https://grubersjoe.github.io/react-activity-calendar/?path=/story/activity-calendar--event-handlers.

A new transformData property has been added. It allows you to manipulate the array with contribution data after it has been fetched from the API. This makes it possible to dynamically show a certain time span like only the last two months in the calendar etc.

See here how to use the property:
https://grubersjoe.github.io/react-github-calendar/#example-transform-data

Happy to release version 3. Please see the following link for detailed information about what has been added and about breaking changes:

https://grubersjoe.github.io/react-github-calendar/#upgrade

• Breaking change: the title above graphs is no longer shown
• contribution count below graphs can be hiden by setting showTotalCount to false

Edit October 2022

v2 no longer works, because Heroku ditched their free plan. Please upgrade to v3!
https://grubersjoe.github.io/react-github-calendar/#upgrade

• Switched to TypeScript
• Breaking change: this component uses date-fns@^2.0.0 now. So the format strings have changed. See here.