@react-sandbox/heatmap

📅🔥 Calendar heatmap component

Customizable SVG inspired by GitHub's contribution graph.

Install

Install the @react-sandbox/heatmap package:

# npm
npm install @react-sandbox/heatmap
# yarn
yarn add @react-sandbox/heatmap
# pnpm
pnpm add @react-sandbox/heatmap

Import

Import the Heatmap component:

importReactfrom'react'importHeatmapfrom'@react-sandbox/heatmap'constvalues=[{date: newDate('2023-01-01T00:00:00'),count: 5},{date: newDate('2023-01-05T00:00:00'),count: 10},{date: newDate('2023-01-15T00:00:00'),count: 7},{date: newDate('2023-02-08T00:00:00'),count: 3}// ...]functionApp(){return(<divstyle={{width: '500px'}}><HeatmapstartDate={newDate('2022-12-30T00:00:00')}values={values}emptyColor={[20,30,30]}baseColor={[0,128,0]}scaleFactor={35}/></div>)}

Props

Prop	Type	Default	Description
startDate	Date	required	Start date
values	Array<DateWithCount>	required	Array of objects with date: Date and count: number
emptyColor	RGB Tuple	[20, 30, 30]	Color of day with a count of 0
baseColor	RGB Tuple	[0, 128, 0]	Color of day with a count of 1 or more
scaleFactor	number	10	Multiplier that increases baseColor intensity
className	string	-	CSS classes
style	React.CSSProperties	-	CSS styles

Development

Local

pnpm install
pnpm dev

Tests

pnpm test

Example

Inside test/:

pnpm install
pnpm dev

License

MIT