contribution-heatmap

a react contribution heatmap calendar component.

do feel free to mark the repo by starring it. below lies some useful links to, hopefully, get you to know this component better:

• simple react example | source code
• storybook preview
• npm link

📌 reporting bugs

feel free to post any, but please check issues before posting.

🤤 usage

to install the library as a dependency to your project, run

yarn add contribution-heatmap
# or, according to your preference
npm install contribution-heatmap

import the library in your project like below, and you can get started using it directly.

// simply import the library, no css-imports needed
import { Heatmap } from "contribution-heatmap"
// and then ... just use it like you would any components
export const YourComponent = () => <Heatmap 
    colour={['#ebedf0', '#c6e48b', '#40c463', '#30a14e', '#216e39']} 
    squareNumber={5} 
    count={[3, 2, 20, 1, 14]}
    squareGap='4px'
    squareSize='15px'
/>

more details on props will come soon. I am making progress, albeit rather slowly—many things are happening lately.

🙋‍♂️ contributing

resolving issues, implementing features or even just eliminating the simplest bugs like typos in the repository will be highly appreciated 🎉. also, feel free to share your ideas in the discussions page.

here I list some starter scripts to run for making contributions to the repo; for the detailed version please go to CONTRIBUTING.md.

🛠 install dependencies

yarn

🔨 get storybook up and running for previewing

yarn storybook

📦 compiles and minifies for production

yarn build:major
yarn build:minor
yarn build:patch