A react based component for monthly heatmap

Usage no npm install needed!

<script type="module">
  import reactMonthlyHeatmap from '';



A calendar heatmap component built with date-fns, inspired by github's repo. The component expands to size of container and is super configurable. Try it out on CodeSandbox.

Based on following tutorials:

Publish Your Own React Component as Npm Package Under 5 Minutes

Create a custom calendar in React


Install the npm module with npm:

npm i react-monthly-heatmap


Import the component:

import HeatMapCalendar from 'react-monthly-heatmap';

To use the component, simply use like following:

    { date: '2019-03-31', count: 1, color: '#8cc665' },
    { date: '2019-04-01', count: 2, color: '#44a340' },
    { date: '2019-04-06', count: 3, color: '#1e6823' },


Name Type Description
values Required, Array of Object Required array of objects which each have a date property, count and color code. Example: [{ date: '2019-03-31', count: 1, color: '#8cc665' }]
onClick Function Callback to invoke when a square is clicked, e.g. (value) => alert(value)
toolTip Function Callback to invoke when mouse pointer is over a date