React Calendar Heatmap

npm i @riishabh/react-calender-heatmap

Nov
Dec
Jan
Feb
Mar
Apr
May

This is a simple react component that displays a calendar heatmap with date and status. It is highly customizable and easy to use.

Usage

import { TileChart } from "@riishabh/react-calender-heatmap";


function App() {

const dummydata = [
  { date: "2022-01-01", status: "success" as const },
  { date: "2022-01-02", status: "warning" as const },
  { date: "2022-01-03", status: "alert" as const },
];


return (
     <TileChart data={dummydata} range={6} />
  );
}

export default App;
React Calendar Heatmap - simple react component that displays a calendar heatmap  | Product Hunt

Made with ❤️ by Rishabh Sharma

© 2022 Rishabh Sharma. Released under the MIT license.