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

介绍一下自己做的一个类似于力扣个人主页提交记录和GitHub主页贡献记录的React组件。

下图分别是力扣个人主页提交记录和GitHub个人主页的贡献记录,像这样类似痕迹墙的形式可以比较直观且高效得展示一段时间内得数据记录。

然而要从0实现这个功能还是有一些麻烦得,并且该功能可用的场景也比较多,于是便把它做成了一个通用的组件,只需要提供数据即可渲染这样的效果。

如何使用

安装

在一个React项目中:

shell 复制代码
npm install yearrecord

使用

引入后当成普通的组件通过data这个prop传递数据即可,也可以不传递任何的prop,这样将使用随机生成的数据,颜色、尺寸等将使用使用默认值。

js 复制代码
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

感谢支持!

相关推荐
Liquor14192 天前
JavaScript知识点梳理及案例实践
开发语言·前端·javascript·python·css3·html5·js
fury_1232 天前
base64文本div中增加一个img标签,img标签实时渲染后端返回的base64数据成对应图片
java·服务器·前端·js
我命由我123453 天前
CesiumJS 案例 P18:检测文本、删除所有文本、隐藏与显示文本、改变文本
前端·javascript·前端框架·html·css3·html5·js
海上彼尚4 天前
根据JSON绘制3D地区
前端·3d·js
我命由我123454 天前
CesiumJS 案例 P19:添加矩形、监听鼠标左击、监听鼠标右击、监听鼠标移动
前端·javascript·前端框架·html·css3·html5·js
满分观测网友z5 天前
ExpandingCard扩展卡片
web·js
Hellc0076 天前
.eslintrc.js 的解释
js
我命由我123457 天前
CesiumJS 案例 P16:标记平移、删除标记、隐藏与显示标记、标记颜色
前端·javascript·前端框架·html·css3·html5·js
我命由我123457 天前
CesiumJS 案例 P13:删除标记、移动标记、标记点击事件
前端·javascript·前端框架·html·css3·html5·js
放逐者-保持本心,方可放逐8 天前
react 框架应用+总结+参考
前端·前端框架·react