{"_id":"@ahmaddzidnii/react-github-heatmap","_rev":"6-e1551e3d44058e2bc9f162e3f82d5081","name":"@ahmaddzidnii/react-github-heatmap","dist-tags":{"latest":"1.2.2"},"versions":{"1.0.0":{"name":"@ahmaddzidnii/react-github-heatmap","version":"1.0.0","author":{"name":"ahmaddzidnii"},"license":"ISC","_id":"@ahmaddzidnii/react-github-heatmap@1.0.0","maintainers":[{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"}],"dist":{"shasum":"38ba45de51e0217fa9d61b561f815b42986c01cf","tarball":"https://registry.npmjs.org/@ahmaddzidnii/react-github-heatmap/-/react-github-heatmap-1.0.0.tgz","fileCount":6,"integrity":"sha512-fTAWk6Z6zY4Ddi3MFGDclPr1ayhMm9Uk5jA9QGior0egIjyVaMf6IghTaturQJkU1jM3oDTr24Mmawa9Np07yw==","signatures":[{"sig":"MEYCIQD3u1K6dgenBPBJNZ+/B+Y8++uhllpNdVTNv0gHnzfQgAIhAOqUc40RbCF0OyPuaxsGU/o0EPwlh/9lAnqbGO/hfVHg","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":203297},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"rollup":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"},"_npmVersion":"11.0.0","description":"React-github-heatmapis a React library for displaying contribution-style heatmaps similar to GitHub's profile activity graph. It is designed to be lightweight, customizable, and easy to integrate into any React project. With support for custom data, flexi","directories":{},"_nodeVersion":"22.12.0","dependencies":{"react-tooltip":"^5.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","tslib":"^2.8.1","rollup":"^4.36.0","typescript":"^5.8.2","@types/react":"^19.0.11","rollup-plugin-dts":"^6.1.1","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/react-github-heatmap_1.0.0_1742304657885_0.27232322466176817","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ahmaddzidnii/react-github-heatmap","version":"1.0.1","keywords":["react","heatmap","calender-heatmap","github-heatmap","react-heatmap","react-github-heatmap","react-calendar-heatmap","react-activity-heatmap","react-activity-graph","react-activity-calendar","react-activity-heatmap","react-activity-graph"],"author":{"name":"ahmaddzidnii"},"license":"MIT","_id":"@ahmaddzidnii/react-github-heatmap@1.0.1","maintainers":[{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"}],"homepage":"https://github.com/ahmaddzidnii/react-github-heatmap#readme","bugs":{"url":"https://github.com/ahmaddzidnii/react-github-heatmap/issues"},"dist":{"shasum":"76ae4c7a15836b6693d9f45bc6d029205811a928","tarball":"https://registry.npmjs.org/@ahmaddzidnii/react-github-heatmap/-/react-github-heatmap-1.0.1.tgz","fileCount":7,"integrity":"sha512-h35x+5kccIih7ntBJkFGrjDNPn8GEMylA/zSobLhvtZKott1Z6mJwFiHWCa2i1b1RG9Ai4E7QYYvXWdRiU3mfQ==","signatures":[{"sig":"MEUCIAEnvHbeI+2m64x2WNLrANSc6TiNtz1kpAqkF8qZPL2bAiEAmTNHnrpkyjByQ6xGogW/wdGA3nUbtjqQ5HNR3V2pD2s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":203835},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"e0fa5ad8a1d22f66064e0b05d101519d0b6d45e3","scripts":{"rollup":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"},"repository":{"url":"git+https://github.com/ahmaddzidnii/react-github-heatmap.git","type":"git"},"_npmVersion":"11.0.0","description":"React-github-heatmapis a React library for displaying contribution-style heatmaps similar to GitHub's profile activity graph. It is designed to be lightweight, customizable, and easy to integrate into any React project. With support for custom data, flexi","directories":{},"_nodeVersion":"22.12.0","dependencies":{"react-tooltip":"^5.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.0.0","tslib":"^2.8.1","rollup":"^4.36.0","typescript":"^5.8.2","@types/react":"^19.0.11","rollup-plugin-dts":"^6.1.1","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/react-github-heatmap_1.0.1_1742305665887_0.48475094051427314","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@ahmaddzidnii/react-github-heatmap","version":"1.1.0","keywords":["react","heatmap","calendar-heatmap","github-heatmap","react-heatmap","react-github-heatmap","react-calendar-heatmap","react-activity-heatmap","react-activity-graph","react-activity-calendar"],"author":{"name":"ahmaddzidnii"},"license":"MIT","_id":"@ahmaddzidnii/react-github-heatmap@1.1.0","maintainers":[{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"}],"homepage":"https://github.com/ahmaddzidnii/react-github-heatmap#readme","bugs":{"url":"https://github.com/ahmaddzidnii/react-github-heatmap/issues"},"dist":{"shasum":"967d7dce206dce1f71587ef0af771a8eb946dfcf","tarball":"https://registry.npmjs.org/@ahmaddzidnii/react-github-heatmap/-/react-github-heatmap-1.1.0.tgz","fileCount":7,"integrity":"sha512-xdwyAgnNrnu/0uYAcVJBvjsvptZletrS81jjK5k6kmg8Asbjb9UgfpHHZMZdFlvNTY+1F9g188RXQlMcNZHpJQ==","signatures":[{"sig":"MEUCIEI28Dcm9NqIYuYnjYlBH5xPUvR84WzuzekDzlvWoCCOAiEAwpAqs+L+kp/1lNs1tNS7ePSk+uRuZpeOiuAtqIf4OTw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106790},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"700f23b2f8ae76fa4b3bdb5955488dca658592c4","scripts":{"rollup":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"},"repository":{"url":"git+https://github.com/ahmaddzidnii/react-github-heatmap.git","type":"git"},"_npmVersion":"11.0.0","description":"React-github-heatmap is a React library for displaying contribution-style heatmaps similar to GitHub's profile activity graph. It is designed to be lightweight, customizable, and easy to integrate into any React project. With support for custom data, flex","directories":{},"_nodeVersion":"22.12.0","dependencies":{"react-tooltip":"^5.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","tslib":"^2.8.1","rollup":"^4.36.0","react-dom":"^18.3.1","typescript":"^5.8.2","@types/react":"^18.0.28","rollup-plugin-dts":"^6.1.1","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=18.0.0 <19.0.0","react-dom":">=18.0.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-github-heatmap_1.1.0_1742338420747_0.12362290074830717","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@ahmaddzidnii/react-github-heatmap","version":"1.2.0","keywords":["react","heatmap","calendar-heatmap","github-heatmap","react-heatmap","react-github-heatmap","react-calendar-heatmap","react-activity-heatmap","react-activity-graph","react-activity-calendar"],"author":{"name":"ahmaddzidnii"},"license":"MIT","_id":"@ahmaddzidnii/react-github-heatmap@1.2.0","maintainers":[{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"}],"homepage":"https://github.com/ahmaddzidnii/react-github-heatmap#readme","bugs":{"url":"https://github.com/ahmaddzidnii/react-github-heatmap/issues"},"dist":{"shasum":"46ecbf0b1820ee9e81a8ea73eef2cde1055d75dd","tarball":"https://registry.npmjs.org/@ahmaddzidnii/react-github-heatmap/-/react-github-heatmap-1.2.0.tgz","fileCount":7,"integrity":"sha512-zH4msH5q5dnKxFah5WzNHdjd6/PiEW0kV9fKnveQZg81+hYuJRRPbxWP6+rYDAoGGYgJPRSkraiGimVjB2Rn0Q==","signatures":[{"sig":"MEYCIQDk+XBI8TNoFojFV0NJaWY8ugUiW1Fpc8HjFwXPczzGSgIhAOQTeop29W07s9YaAwHyZfB/gWyAOTid8TE93s1ehe66","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":105492},"main":"dist/cjs/index.js","type":"module","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"ce9cdf65a3952f6e7133a7a091092f8310fa761b","scripts":{"dev":"vite","build":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"},"repository":{"url":"git+https://github.com/ahmaddzidnii/react-github-heatmap.git","type":"git"},"_npmVersion":"11.0.0","description":"React-github-heatmap is a React library for displaying contribution-style heatmaps similar to GitHub's profile activity graph. It is designed to be lightweight, customizable, and easy to integrate into any React project. With support for custom data, flex","directories":{},"_nodeVersion":"22.12.0","dependencies":{"classnames":"^2.5.1","react-tooltip":"^5.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.0","react":"^18.3.1","tslib":"^2.8.1","rollup":"^4.36.0","react-dom":"^18.3.1","typescript":"^5.8.2","@types/react":"^18.0.28","@types/react-dom":"^18.0.4","rollup-plugin-dts":"^6.1.1","@vitejs/plugin-react":"^4.3.4","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=18.0.0 <19.0.0","react-dom":">=18.0.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-github-heatmap_1.2.0_1742481284168_0.7147075964010592","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@ahmaddzidnii/react-github-heatmap","version":"1.2.1","keywords":["react","heatmap","calendar-heatmap","github-heatmap","react-heatmap","react-github-heatmap","react-calendar-heatmap","react-activity-heatmap","react-activity-graph","react-activity-calendar"],"author":{"name":"ahmaddzidnii"},"license":"MIT","_id":"@ahmaddzidnii/react-github-heatmap@1.2.1","maintainers":[{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"}],"homepage":"https://github.com/ahmaddzidnii/react-github-heatmap#readme","bugs":{"url":"https://github.com/ahmaddzidnii/react-github-heatmap/issues"},"dist":{"shasum":"3dd53f83272444d240f2508eb7d0b6926e8d88c1","tarball":"https://registry.npmjs.org/@ahmaddzidnii/react-github-heatmap/-/react-github-heatmap-1.2.1.tgz","fileCount":7,"integrity":"sha512-ijO3zti+paQky3RCtGkqYOHgbzp5qvTSWbn/CFrCzD+Vzn/vK8GWnRnPdWiSXQXjPGLcy/yE0aC0biiaR4j2lQ==","signatures":[{"sig":"MEQCIDrIuV8USkC24rQ0cYAxvlU4CDaGkxBUgYl1vU5knuIkAiBjbH82ZaKRdfyb2pPpBYtRH8CIImmWV5WwV/pr8YnZaA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":107657},"main":"dist/cjs/index.js","type":"module","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"07faed38aceac23dd46f041af4e01a047a6b49c9","scripts":{"dev":"vite","build":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"},"repository":{"url":"git+https://github.com/ahmaddzidnii/react-github-heatmap.git","type":"git"},"_npmVersion":"11.0.0","description":"React-github-heatmap is a React library for displaying contribution-style heatmaps similar to GitHub's profile activity graph. It is designed to be lightweight, customizable, and easy to integrate into any React project. With support for custom data, flex","directories":{},"_nodeVersion":"22.12.0","dependencies":{"classnames":"^2.5.1","react-tooltip":"^5.28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.0","react":"^18.3.1","tslib":"^2.8.1","rollup":"^4.36.0","react-dom":"^18.3.1","typescript":"^5.8.2","@types/react":"^18.0.28","@types/react-dom":"^18.0.4","rollup-plugin-dts":"^6.1.1","@vitejs/plugin-react":"^4.3.4","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=18.0.0 <19.0.0","react-dom":">=18.0.0 <19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-github-heatmap_1.2.1_1742774604020_0.10412316639015806","host":"s3://npm-registry-packages-npm-production"}},"1.2.2":{"name":"@ahmaddzidnii/react-github-heatmap","version":"1.2.2","description":"React-github-heatmap is a React library for displaying contribution-style heatmaps similar to GitHub's profile activity graph. It is designed to be lightweight, customizable, and easy to integrate into any React project. With support for custom data, flex","license":"MIT","author":{"name":"ahmaddzidnii"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","type":"module","types":"dist/index.d.ts","scripts":{"dev":"vite","build":"rollup -c --bundleConfigAsCjs"},"keywords":["react","heatmap","calendar-heatmap","github-heatmap","react-heatmap","react-github-heatmap","react-calendar-heatmap","react-activity-heatmap","react-activity-graph","react-activity-calendar"],"repository":{"type":"git","url":"git+https://github.com/ahmaddzidnii/react-github-heatmap.git"},"homepage":"https://github.com/ahmaddzidnii/react-github-heatmap#readme","devDependencies":{"@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.2","@types/react":"^18.0.28","@types/react-dom":"^18.0.4","@vitejs/plugin-react":"^4.3.4","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^4.36.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tslib":"^2.8.1","typescript":"^5.8.2","vite":"^6.2.0"},"dependencies":{"classnames":"^2.5.1","react-tooltip":"^5.28.0"},"peerDependencies":{"react":">=18.0.0 <19.0.0","react-dom":">=18.0.0 <19.0.0"},"publishConfig":{"access":"public"},"_id":"@ahmaddzidnii/react-github-heatmap@1.2.2","gitHead":"a297782e8e4f795fd77c5b620948853ffade90c6","bugs":{"url":"https://github.com/ahmaddzidnii/react-github-heatmap/issues"},"_nodeVersion":"22.12.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-IhnZ1sUqunfnGDLN1lH2I9lnT3JxzZqFYOxCvEVoXpmXCubUtqEXXIL/XY2akfHsz5FRCdF3kf3GArlGJi/AEQ==","shasum":"4d495fc760ebbde2d5bad1ae0296468e1a79033d","tarball":"https://registry.npmjs.org/@ahmaddzidnii/react-github-heatmap/-/react-github-heatmap-1.2.2.tgz","fileCount":7,"unpackedSize":113836,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC9r84vwvxApUamnawUZSTQLjtNzYqkd0b9aXy3ZCS5dgIhAL8hr3xZcbUh+z3GX5/UUwKJZ5/ZtFPbJDdOE83Pou17"}]},"_npmUser":{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"},"directories":{},"maintainers":[{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-github-heatmap_1.2.2_1742774774283_0.47300578432590257"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-18T13:30:57.822Z","modified":"2025-03-24T00:06:14.647Z","1.0.0":"2025-03-18T13:30:58.093Z","1.0.1":"2025-03-18T13:47:46.141Z","1.1.0":"2025-03-18T22:53:40.924Z","1.2.0":"2025-03-20T14:34:44.319Z","1.2.1":"2025-03-24T00:03:24.222Z","1.2.2":"2025-03-24T00:06:14.453Z"},"bugs":{"url":"https://github.com/ahmaddzidnii/react-github-heatmap/issues"},"author":{"name":"ahmaddzidnii"},"license":"MIT","homepage":"https://github.com/ahmaddzidnii/react-github-heatmap#readme","keywords":["react","heatmap","calendar-heatmap","github-heatmap","react-heatmap","react-github-heatmap","react-calendar-heatmap","react-activity-heatmap","react-activity-graph","react-activity-calendar"],"repository":{"type":"git","url":"git+https://github.com/ahmaddzidnii/react-github-heatmap.git"},"description":"React-github-heatmap is a React library for displaying contribution-style heatmaps similar to GitHub's profile activity graph. It is designed to be lightweight, customizable, and easy to integrate into any React project. With support for custom data, flex","maintainers":[{"name":"ahmaddzidnii","email":"ahmadpc1203@gmail.com"}],"readme":"## React Github Heatmap\r\n\r\n![\"img\"](\"https://github.com/user-attachments/assets/23f9a2d6-cc57-4b3b-8644-5a9629c149fc\")
\r\n\r\n\r\n
\r\nReact Heatmap – Visualize Data with Style.
\r\n React Heatmap is a lightweight, highly customizable, and beautifully designed heatmap component for React. Whether you're tracking user interactions, visualizing complex datasets, or enhancing dashboards, this package makes it effortless to create stunning heatmaps.
\r\n
\r\n\r\n\r\n\r\n
\r\n\r\n## Table of Contents\r\n\r\n- [Features](#features)\r\n- [Installation](#installation)\r\n- [Getting Started](#getting-started)\r\n- [Customizing Colors](#customizing-colors)\r\n- [API](#api)\r\n\r\n
\r\n\r\n## Features\r\n\r\n- ✅ Fully customizable colors\r\n- ✅ Fast and lightweight for smooth performance\r\n- ✅ Interactive & responsive for modern UI needs\r\n- ✅ Easy integration with React projects\r\n\r\n## Installation\r\n\r\n#### With pnpm\r\n\r\n```sh\r\npnpm add @ahmaddzidnii/react-github-heatmap\r\n```\r\n\r\n#### With NPM\r\n\r\n```sh\r\nnpm install @ahmaddzidnii/react-github-heatmap\r\n```\r\n\r\n#### With Yarn\r\n\r\n```sh\r\nyarn add @ahmaddzidnii/react-github-heatmap\r\n```\r\n\r\n## Getting Started\r\n\r\nFirst, to perform testing, we create helper functions `generateDataByDateRange()` and `get52WeeksDateRange` to generate the data in `./helpers.ts`.\r\n\r\n```ts\r\nexport const generateDataByDateRange = (startDate: string, endDate: string) => {\r\n const start = new Date(startDate);\r\n const end = new Date(endDate);\r\n const generatedData = [];\r\n\r\n for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {\r\n const year = d.getFullYear();\r\n const month = String(d.getMonth() + 1).padStart(2, \"0\");\r\n const day = String(d.getDate()).padStart(2, \"0\");\r\n\r\n generatedData.push({\r\n date: `${year}-${month}-${day}`,\r\n contributions: Math.floor(Math.random() * 51), // Random number between 0-100\r\n });\r\n }\r\n\r\n return generatedData;\r\n};\r\n\r\nexport const get52WeeksDateRange = ({ endDate }: { endDate: Date }) => {\r\n // Go back approximately one year (52 weeks)\r\n let startDate = new Date(endDate);\r\n startDate.setDate(endDate.getDate() - 52 * 7);\r\n\r\n // Adjust to the nearest Sunday if not already a Sunday\r\n while (startDate.getDay() !== 0) {\r\n startDate.setDate(startDate.getDate() - 1);\r\n }\r\n\r\n const strStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(\r\n 2,\r\n \"0\"\r\n )}-${String(startDate.getDate()).padStart(2, \"0\")}`;\r\n const strEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(\r\n 2,\r\n \"0\"\r\n )}-${String(endDate.getDate()).padStart(2, \"0\")}`;\r\n\r\n return { startDate: strStartDate, endDate: strEndDate };\r\n};\r\n```\r\n\r\nNext, create your React component, for example in `App.tsx`\r\n\r\n```tsx\r\nimport { ReactGithubHeatmap } from \"@ahmaddzidnii/react-github-heatmap\";\r\nimport { get52WeeksDateRange, generateDataByDateRange } from \"./helpers\";\r\n\r\nconst App = () => {\r\n const { endDate, startDate } = get52WeeksDateRange({\r\n endDate: new Date(),\r\n });\r\n const data = generateDataByDateRange(startDate, endDate);\r\n return (\r\n \r\n {\r\n if (!t.contributions) {\r\n return `No contributions on ${t.date}`;\r\n }\r\n\r\n return `${t.contributions} contributions on ${t.date}`;\r\n }}\r\n tooltipOptions={{\r\n place: \"top\",\r\n }}\r\n />\r\n \r\n );\r\n};\r\n```\r\n\r\n## Customizing Colors\r\n\r\nYou can customize the colors of the heatmap by adding your own CSS classes. For example, you can define a custom class in your CSS file and apply it to the heatmap.\r\n\r\n### Example\r\n\r\n1. Create a CSS file (e.g., `styles.css`) and define your custom styles:\r\n\r\n```css\r\n[data-level=\"0\"] {\r\n background-color: #ebedf0 !important;\r\n}\r\n\r\n[data-level=\"1\"] {\r\n background-color: #9be9a8 !important;\r\n}\r\n\r\n[data-level=\"2\"] {\r\n background-color: #40c463 !important;\r\n}\r\n\r\n[data-level=\"3\"] {\r\n background-color: #30a14e !important;\r\n}\r\n\r\n[data-level=\"4\"] {\r\n background-color: #216e39 !important;\r\n}\r\n```\r\n\r\n2. Import the CSS file into your React component:\r\n\r\n```tsx\r\nimport \"./styles.css\";\r\nimport { ReactGithubHeatmap } from \"@ahmaddzidnii/react-github-heatmap\";\r\nimport { get52WeeksDateRange, generateDataByDateRange } from \"./helpers\";\r\n\r\nconst App = () => {\r\n const { endDate, startDate } = get52WeeksDateRange({\r\n endDate: new Date(),\r\n });\r\n const data = generateDataByDateRange(startDate, endDate);\r\n\r\n return (\r\n \r\n {\r\n if (!t.contributions) {\r\n return `No contributions on ${t.date}`;\r\n }\r\n\r\n return `${t.contributions} contributions on ${t.date}`;\r\n }}\r\n tooltipOptions={{\r\n place: \"top\",\r\n }}\r\n />\r\n \r\n );\r\n};\r\n```\r\n\r\n3. Run your application, and the heatmap will now use the custom styles defined in your CSS file.\r\n\r\n## API\r\n\r\n| Prop | Type | Description |\r\n| -------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |\r\n| data | `arrayofobj` | Array of objects containing `date` and `contributions` for the heatmap. |\r\n| startDate | `string` | The start date for the heatmap data range in `YYYY-MM-DD` format. |\r\n| endDate | `string` | The end date for the heatmap data range in `YYYY-MM-DD` format. |\r\n| tooltipContent | `function` | Function to customize the content of the tooltip displayed on hover. |\r\n| tooltipOptions | `object` | Object to configure tooltip behavior and appearance. [See React Tooltip Docs](https://react-tooltip.com/docs/getting-started) |\r\n","readmeFilename":"README.md"} ![\"Star\"](\"https://img.shields.io/github/stars/ahmaddzidnii/react-github-heatmap\")
\r\n\r\n