- 常用组件
(1). react美化滚动条
https://github.com/malte-wessel/react-custom-scrollbars
(3). 在线编辑editor
a). 基于Monaco Editor的react-monaco-editor
https://github.com/superRaytin/react-monaco-editor
Monaco Editor官网: https://microsoft.github.io/monaco-editor/index.html
(4). react布局
a). 自由拖拽布局
https://github.com/STRML/react-grid-layout
b). 只拖拽
https://github.com/mzabriskie/react-draggable
c). 只更改dom大小
https://github.com/STRML/react-resizable
d). 拖拽和更改大小
https://github.com/bokuweb/react-rnd
(5). 数据格式化
a). JSON normalizr
https://github.com/paularmstrong/normalizr
(6). 轻量级react table
https://react-table.js.org/#/story/readme
(7). 添加全屏背景视频的库
https://github.com/rishabhp/bideo.js
(8). 键盘操作事件库
https://github.com/ccampbell/mousetrap
(9). 颜色选择器
https://github.com/casesandberg/react-color
(10). 头部进度条
http://ricostacruz.com/nprogress/
(11). 全局提示组件
https://github.com/fkhadra/react-toastify
(12). 全局提示框
https://github.com/haradakunihiko/react-confirm
- PWA资源
(1). pwa实战源码
https://github.com/deanhume/progressive-web-apps-book
(2). Workbox构建PWA
https://codelabs.developers.google.com/codelabs/workbox-lab-cn/index.html?index=..%2F..%2Fgddchina#0
(3). workbox结合Webpack构建PWA
https://webpack.docschina.org/guides/progressive-web-application/
- React 服务器渲染框架
(1). Next.js
https://github.com/zeit/next.js // 代码仓库
https://juejin.im/post/59f72fef518825569538ef5a // Next.js v4.1.4 文档
(2). gatsby(静态站点生成器)
https://github.com/gatsbyjs/gatsby
注意:
next.js 和 gatsby的区别是:
next.js是动态在服务器进行渲染成静态页面,然后发送到前端
gatsby是预先生成静态页面,避免了重复渲染,它是静态站点生成器
- 实现高阶组件常用包
(1). hoist-non-react-statics
它会自动拷贝所有非React的静态方法
https://github.com/mridgway/hoist-non-react-statics
- React兼容的第三方mini库
(1). 完全兼容React16的第三方库
https://github.com/RubyLouvre/anu
(2). preact
https://github.com/developit/preact
- 浏览器本地存储管理包
(1). localStore管理
https://github.com/ozantunca/locally
- js算法
(1). 字符串压缩算法
http://pieroxy.net/blog/pages/lz-string/index.html
- 组件工具
(1). 飞冰可视化设计器
https://alibaba.github.io/ice/docs/ice-design
- 可视化组件库
(1). echarts
(2). highcharts
(3). antV
https://antv.alipay.com/zh-cn/index.html
备注: 针对antV封装的react组件库
http://bizcharts.net/index
(4). 图形关系编辑器
https://github.com/antvis/g6-editor
备注:是社区antvis中的项目(基于g6)
https://github.com/gaoli/GGEditor
备注:是人项目(基于g6)
- react动画组件
(1).
https://github.com/FormidableLabs/react-animations
(2). 组件进入或离开是的过度动画库
https://github.com/reactjs/react-transition-group
(3). antd motion动画库
https://motion.ant.design/components/tween-one
(4). React FLIP动画助手库,用于高度可配置的过渡
https://github.com/aholachek/react-flip-toolkit
(5). 滚动动画
https://github.com/gilbox/react-spark-scroll
(6). 动画问题的春天
https://github.com/chenglou/react-motion
(7). 数据驱动动画
https://github.com/tkh44/data-driven-motion
(8). 数据驱动动画
https://github.com/react-tools/react-move
(9). 交互dom速率组件包
https://github.com/google-fabric/velocity-react
- react中内置style css
1. 自带样式的组件
https://github.com/styled-components/styled-components
2.
https://github.com/cssinjs/react-jss
3.
https://github.com/Khan/aphrodite
4.
https://github.com/FormidableLabs/radium
5.
https://github.com/zeit/styled-jsx
- dom操作
1. 非常轻量级的dom库
https://github.com/nbubna/HTML
- webgl操作库
(1). 简化原生webgl繁琐的轻量级webgl库
1. twgl.js
https://github.com/greggman/twgl.js
2. lightgl.js
https://github.com/evanw/lightgl.js
(2).重量级webgl库
1. three.js
https://github.com/mrdoob/three.js
2. xeogl.js
https://github.com/xeolabs/xeogl
(3).矩阵库
1. gl-matrix
https://github.com/toji/gl-matrix
- web端语音识别
(1). js中内置的语音api
https://juejin.im/entry/5afe4ad3518825426539b0ca
(2). JuliusJS: 基于JavaScript的在线语音识别库
http://ourjs.com/detail/54387c58bc3f9b154e000009
- react拖拽放置
(1). 列表拖拽库
https://github.com/chinanf-boy/react-beautiful-dnd-zh
(2). Drag and Drop for React
https://github.com/react-dnd/react-dnd/