react-date-heatmap v1.0.6

react-date-heatmap

A React Component that allows you to visualize an array of dates in form of a heatmap.

Installation

Install react-date-heatmap in your project using the following npm command:

npm install react-date-heatmap

Or with yarn

yarn add react-date-heatmap

After installation, you can use the ReactDateHeatmap component in your React project.

import React from 'react';
import ReactDateHeatmap from 'react-date-heatmap';

const YourComponent = () => {
  const arrayOfDates = /* ... */;

  return (
    <ReactDateHeatmap data={arrayOfDates} />
  );
}

export default YourComponent;

Usage Example

import React, { useState } from "react";
import { DateEntry, ReactDateHeatmap } from "react-date-heatmap";

// generate an array of random dates
function getRandomDateArray(length: number) {
  const startDate = new Date(2023, 9, 7);
  const endDate = new Date(2023, 11, 31);
  const dateArray: Date[] = [];
  for (let i = 0; i < length; i++) {
    const randomTime =
      startDate.getTime() +
      Math.random() * (endDate.getTime() - startDate.getTime());
    const randomDate = new Date(randomTime);
    dateArray.push(randomDate);
  }
  return dateArray;
}

function ExampleApp() {
  const [data, setData] = useState(getRandomDateArray(100));

  // Console log the Entry you clicked on
  const onSquareClick = (entry: DateEntry) => {
    console.log("You Clicked on entry", entry);
  };
  // Create your own content div that shows up when you hover over a square/entry
  const TooltipContent = ({ entry }: { entry: DateEntry }) => {
    return (
      <div style={{ display: "flex", flexDirection: "column" }}>
        <span>{entry.formatted}</span>
        <span>Entries: {entry.quantity}</span>
      </div>
    );
  };

  return (
    <ReactDateHeatmap
      data={data}
      tooltipContent={TooltipContent}
      onSquareClick={onSquareClick}
      squareColor="#ff0000"
    />
  );
}

export default ExampleApp;

List of Props

Types

DateEntry