介紹一下自己做的一個類似於力扣個人主頁提交記錄和GitHub主頁貢獻記錄的React組件。
下圖分別是力扣個人主頁提交記錄和GitHub個人主頁的貢獻記錄，像這樣類似痕跡牆的形式可以比較直觀且高效得展示一段時間內得數據記錄。

然而要從0實現這個功能還是有一些麻煩得，並且該功能可用的場景也比較多，於是便把它做成了一個通用的組件，只需要提供數據即可渲染這樣的效果。

如何使用

安裝

在一個React項目中:

npm install yearrecord

使用

引入後當成普通的組件通過data這個prop傳遞數據即可，也可以不傳遞任何的prop，這樣將使用隨機生成的數據，顏色、尺寸等將使用使用默認值。

import YearRecord from "yearrecord"

function App() {

  return (
    <>
      <YearRecord
        themeColor="green"
        tooltipTitileFunc={item => `${item.year}年${item.month}月${item.day}日, ${item.data}次瀏覽`}
      ></YearRecord>
    </>
  )
}

export default App

然後可得到如下的渲染結果：

組件提供了較高的可配置能力，可通過props自定義主題顏色、間距、尺寸、tooltip title等等，具體可參考項目主頁的API表格。

目前該組件僅完成了比較核心的功能，相對於GitHub的貢獻記錄還有一些特性沒有實現，如果有感興趣的小夥伴，歡迎來給這個組件提issue、提pr，如果能給一個star就更好了🤣

項目主頁：https://qgq99.github.io/yearrecord/
代碼地址：https://github.com/qgq99/yearrecord

感謝支持！