react-monthly-heatmap

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

Setup

Install the npm module with npm:

npm i react-monthly-heatmap

Usage

Import the component:

import HeatMapCalendar from 'react-monthly-heatmap';

To use the component, simply use like following:

<HeatMapCalendar
  values={[
    { date: '2019-03-31', count: 1, color: '#8cc665' },
    { date: '2019-04-01', count: 2, color: '#44a340' },
    { date: '2019-04-06', count: 3, color: '#1e6823' },
  ]}
/>

Props

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