Lightweight Calendar Heatmap Component For React

A lightweight calendar heatmap React component built on top of SVG and inspired by GitHub’s contribution graph.

How to use it:

1. Install and import the component.

# NPM
$ npm i @uiw/react-heat-map --save

import ReactDOM from 'react-dom';
import HeatMap from '@uiw/react-heat-map';

2. Define events in an array as follows:

const value = [
  { date: '2021/01/11', count: 2 },
  { date: '2021/01/12', count: 20 },
  { date: '2021/01/13', count: 10 },
  ...[...Array(17)].map((_, idx) => ({ date: `2021/02/${idx + 10}`, count: idx, content: '' })),
];

3. Render a calendar heatmap on the app.

const Demo = () => {
  return (
    <div>
      <HeatMap value={value} startDate={new Date('2021/01/01')} />
    </div>
  )
};
ReactDOM.render(<Demo />, _mount_);

Preview:

Download Details:

Author: uiwjs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/uiwjs/react-heat-map

License: MIT