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