yearrecord——一个类似痕迹墙的React数据展示组件

yearrecord——一个类似痕迹墙的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

感谢支持!

posted on   漫思  阅读(6)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2022-07-19 拍下宇宙的韦伯空间望远镜,其飞行软件采用 C++ 编写、内置定制的 JS 解释器
2022-07-19 Hype 4.0(Mac系统)的布局功能
2022-07-19 Immer 入门
2022-07-19 设计克制
2022-07-19 adobe工具软件应用
2022-07-19 高性能动画的
2022-07-19 RN Weex的超过100片

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示