react-heatmaps-grid v1.0.4

Heatmap Component

A minimal and customizable heatmap component for React, perfect for visualizing activity data over time.

Installation

npm install react-heatmaps-grid

or

yarn add react-heatmaps-grid

Usage

Import the Heatmap component and pass the required props:

import React from "react";
import Heatmap from "react-heatmaps-grid";

const userActivity = [
  { date: "2025-03-01", count: 2 },
  { date: "2025-03-02", count: 5 },
  { date: "2025-03-03", count: 8 },
  // Add more data points
];

const App = () => {
  return (
    <div>
      <h2>Activity Heatmap</h2>
      <Heatmap userActivity={userActivity} startDate="2025-03-01" endDate="2025-03-31" />
    </div>
  );
};

export default App;

Props

Customization

You can customize the component by modifying styles or passing additional props.

License

This project is licensed under the MIT License.