yearrecord——一個類似痕跡牆的React資料展示元件

闻风听雨發表於2024-07-17
React元件

介紹一下自己做的一個類似於力扣個人主頁提交記錄和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

感謝支援！

相關文章