Heatmapjs React

A very simple port of heatmap.js for React. The idea behind this component is to be able to display a heatmap over any type of content (image, div, components ...). Inspired by react-heatmap.

Demo & Examples

Live Demo: @sarpere/heatmapjs-react

yarn
yarn dev

Then open localhost:8000 in a browser.

Storybook

yarn storybook

Then open localhost:6006 in a browser.

Installation

npm

    npm i @sarpere/heatmapjs-react

yarn

    yarn add @sarpere/heatmapjs-react

Usage

import { Heatmap } from "@sarpere/heatmapjs-react";
const App = () => {
    const data = [{ x: 10, y: 15, value: 5}, { x: 50, y: 50, value: 2}, ...];
    return (
        <Heatmap max={5} data={data} />
    )
}

Props

| Prop | Type | Default | Required | Description | |--|--|--|--|--| | max | int | 5 | Yes | Maximum value for intensity | | data | array | [] | Yes | Heatmap array of dots | | unit | string | decimal | No | Can be either percent or decimal. If percent, a x value like 26 is considered 26% of the container from the top left| | config | HeatmapConfig | {   radius: 40,   renderer: "canvas2d",   gradient: {        0.25: "rgb(0,0,255)",    ​​​​​​​    0.55: "rgb(0,255,0)",​​​​​​​    ​​​​​​​    0.85: "yellow",​​​​​​​    ​​​​​​​    1.0: "rgb(255,0,0)",​​​​​​​    },​​​​​​​    maxOpacity: 1,​​​​​​​    minOpacity: 0,​​​​​​​    blur: 0.85,​​​​​​​    xField: "x",​​​​​​​    yField: "y",​​​​​​​    valueField: "value",​​​​​​​    plugins: {},} | No | A Heatmap can be customized with the HeatmapConfig. More info on Heatmap.js configObject |