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-heatmapUsage
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 |