首页 > 其他分享 >yearrecord——一个类似痕迹墙的React数据展示组件

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

时间:2024-07-19 18:20:47浏览次数:12  
标签:记录 React item yearrecord 个人主页 组件

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就更好了

标签:记录,React,item,yearrecord,个人主页,组件
From: https://www.cnblogs.com/sexintercourse/p/18312084

相关文章

  • 日常工作中需要避免的9个React坏习惯
    日常工作中需要避免的9个React坏习惯前言React是前端开发领域中最受欢迎的JavaScript库之一,但有时候在编写React应用程序时,可能陷入一些不佳的习惯和错误做法。这些不佳的习惯可能导致性能下降、代码难以维护,以及其他问题。在本文中,我们将探讨日常工作中应该避免的9个坏React......
  • 组件服务:8000401a 因为配置标识不正确,系统无法开始服务器进程。请检查用户名和密码
     报错日志:StartCADException:RetrievingtheCOMclassfactoryforcomponentwithCLSID{DED89DB0-45B6-11CE-B307-0800363A1E02}failedduetothefollowingerror:8000401a因为配置标识不正确,系统无法开始服务器进程。请检查用户名和密码。(0x8000401A).【记录时间......
  • 电子组件的自动AXI射线检测
    检查PCBA缺陷的AOI、3DAOI系统有一个局限性:即使是AOI也无法目视检查人眼隐藏的东西。带有平面端子的组件(如BGA、CSP、倒装芯片或QFN)的焊点通常不可见,现在每三个焊点中就有一个是隐藏的。然而,电子组件的可靠性本质上与这些焊点的质量有关。X射线检测可以查看组件内部,并可以显着减......
  • 未来组件化开发趋势WebComponent
    未来组件化开发趋势WebComponent优点:原生组件,不需要框架,性能好代码少。缺点:兼容性问题组件化好处:高内聚、可重用、可组合https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components核心三项技术Customelements:一组JavaScriptAPI,允许您定义customelemen......
  • vue3 使用component is 动态组件
    使用方式父组件<template><divclass="box"><div><!--setup需要用变量的方式来写入is,如果是optionsapi方式可以用组件字符--><!--myProps属性可以直接传到动态组件--><component:is="childT"myProps="sldfjsklfjksf......
  • [email protected](62)[email protected](11)- 中间件2 - redux-thunk
    目录1,介绍举例2,原理和实现实现3,注意点1,介绍一般情况下,action是一个平面对象,并会通过纯函数来创建。exportconstcreateAddUserAction=(user)=>({type:ADD_USER,payload:user,});这样是有一些限制的无法使用异步的,比如在请求接口之后再做一......
  • Vue3动态生成组件
    在Vue3中,要遍历funConfig并动态生成组件,可以使用Vue的defineAsyncComponent来加载异步组件,并结合v-for指令在模板中进行渲染。以下是一个示例代码来实现这个需求:1.配置文件确保配置文件导出的是一个reactive对象:import{reactive}from'vue';exportconst......
  • 深入理解 Vue 3 组件通信
    在Vue3中,组件通信是一个关键的概念,它允许我们在组件之间传递数据和事件。本文将介绍几种常见的Vue3组件通信方法,包括props、emits、provide和inject、事件总线以及Vuex状态管理。1.使用props和emits进行父子组件通信props传递数据props是父组件向子组件传递......
  • 基于注解方式组件管理
    基于注解方式组件管理之前是通过在xml文件中向ioc容器中配置bean,通过<bean标签的方式,注解的方式是在Java类上使用注解标记某个类,将该类配置到ioc容器。主要分成两步:在类上使用注解让ioc识别那些类加了注解1.注解的ioc配置spring提供了以下几个注解,直接标记在类上,把他......
  • python gradio 的输出展示组件
    HTML:展示HTML内容,适用于富文本或网页布局。JSON:以JSON格式展示数据,便于查看结构化数据。KeyValues:以键值对形式展示数据。Label:展示文本标签,适用于简单的文本输出。Markdown:支持Markdown格式的文本展示。Plot:展示图表,如matplotlib生成的图表。Text:用于显示文本,适合较长的输出。......