gikkkkkk / noteco

一款由 dumi 构建，基于 React + TypeScript 的组件库 🚀。

Noteco

Noteco，是一款由 dumi 构建，基于 React + TypeScript 的组件库 🚀

文档：https://RyanProMax.github.io/noteco/

🌼 Just component, not UI.

没有 UI 设计，只专注逻辑本身。

❓ what is this

这是一个用于学习的组件库，注释说明每一个组件的实现思路。

📦 安装

使用 npm 或 yarn 安装

npm install noteco

yarn add noteco

🔨 使用

按需加载

noteco 默认支持按需加载，直接通过 ES Modules 引入即可，充分利用 Tree Shaking 机制。

示例

import { FPS } from 'noteco';

const Component = () => <FPS />;

📅 计划

UI 组件

• Avatar - 选择头像
• Divider - 分割线
• Input - 输入框
• Pagination - 分页器

功能组件

• FPS - 帧率检测
• Watermark - 水印
• DragList - 拖拽列表
• VirtualList - 虚拟列表
• Transition - 过渡动画组件

动画组件

这部分内容的实现主要参照大佬的作品：https://csscoco.com/inspiration/ ，加以封装方便复用。

• AnimateLineSimpleText - 线性动画文字
• AnimateLineText - 线性动画文字
• BreakText - 故障文字
• NumberCount3D - 3D 数字
• OutlineAnimation - 线条动画
• StringRain - 字符雨