React-Components

记录React开发中积累的组件、Hook，以及UMI3、Webpack相关。

LIVE

https://lemonreds.github.io/react-components/

Component

• MarQuee 文字走马灯组件 【2021-07-28】
• FeedBack 触摸反馈效果组件【2021-04-15】
• TextEllipsis 单行文本省略组件【2021-04-13】
• Accordion 折叠面板 【2020-09-27】
• createLoadable Webpack动态导入包装组件 【2020-09-25】
• Captha 验证码组件 【2020-09-21】
• Form 表单相关组件
  • Form 基于rc-field-form的表单封装组件【2020-09-28】
  • Slider 滑动条 【2020-09-22】
  • Button 水波纹按钮 【2020-09-21】
  • Input 输入框 【2020-09-17】
  • Switch 开关 【2020-09-17】
• HorizontalScroller 水平滚动容器 【2020-09-08】
• TimeLine 时间线进度条组件 【2020-06-26】
• Echarts E-charts的react容器以及一些配置图表
• VirtualList 虚拟滚动列表 【2020-06-26】
• Tabs 标签页 【2020-07-02】
• Lazyload 懒加载组件 【2020-07-06】
• Loading loading组件 【2020-07-04】

Hook

• useFontSize 该hook可以提取H5页面在andoird/iOS下，字体缩放的比例 【2021-07-15】
• useLatestRef 用于解决函数组件闭包陷阱的hook 【2021-07-15】
• useResizeObserver 监听DOM元素的宽高以及位置变化 【2021-03-04】
• useDraggable 使容器内的DOM可拖拽 【2020-09-23】
• useFullScreen 基于screenfull的元素全屏【2020-09-01】
• useTable 表格状态提取 【2020-08-26】
• useInfiniteScroller 列表无限加载组件【2020-08-26】
• useVirtual 虚拟滚动列表，支持高度不一致【2020-08-21】
• useOnScreen 监听DOM元素是否可见 【2020-08-21】

Demo

• react-pdf 基于react-pdf的改造，增加了虚拟滚动的支持 【2022-03-14】
• react-fast-marquee 兼容了IE11的文字跑马灯【2022-02-15】
• m-pull-to-refresh 一个支持下拉刷新、上拉加载的 React 移动端组件。 【2021-06-24】
• better-scroll react使用better-scroll的例子 【2021-05-19】
• swiper react使用swiper.js/react的例子
  • SwiperTabs 基于swiper的Tabs组件 【2021-05-26】
  • Base 基础轮播图使用【2021-05-14】
• AliPlayer react封装AliPlayer的例子 【2021-05-10】
• PdfView react-pdf的使用例子以及分页器 【2021-05-10】
• react-intl 的多语言方案,封装了常用的功能 【2021-04-14】

Tool

• CSSvariable 基于CSS变量的换肤 【2020-09-18】
• StorageTool 统一用JSON格式来读写localStorage 【2020-08-26】

UMI-PLUGIN

• umi-plugin-intl 当不使用umi的plugin-locale时，为umi增加react-intl的默认导出 【2021-04-14】
• umi-plugin-404 为UMI3的约定式路由补上404路由 【2020-09-16】
• umi-plugin-config-routes 对UMI3约定式路由的再过滤，过滤一些不需要的路由规则，可以删减一些被错误当作路由引入的组件。【2020-09-15】

本地运行

或者使用 yarn/cnpm 来安装node依赖.

1. npm run install

2. npm run start

3. npm run build