Skip to content

sarpere/heatmapjs-react

Repository files navigation

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

@sarpere/heatmapjs-react example

Then open localhost:8000 in a browser.

@sarpere/heatmapjs-react storybook 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