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 |