@sarpere/heatmapjs-react NPM

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