└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # react-component 2 | > 工作中使用到的一些组件库收集 3 | 4 | 5 | 表单表格 6 | --- 7 | 8 | - [React表单](https://github.com/react-component/form) 9 | - [React表格](https://github.com/react-component/table) 10 | - [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table) 11 | - [React Input Number ](https://github.com/react-component/input-number) 12 | - [react-selectable-extended](https://github.com/leopoldjoy/react-selectable-extended) 13 | 14 | 日期 15 | --- 16 | > Date picker / time picker / datetime picker / date range picker 17 | 18 | - [React Calendar](https://github.com/react-component/calendar) 19 | - [time-picker](https://github.com/react-component/time-picker) 20 | - [react-datepicker](https://github.com/Hacker0x01/react-datepicker) 21 | - [rc-calendar](https://github.com/react-component/calendar) 22 | - [react-date-range](https://github.com/Adphorus/react-date-range) 23 | - [Flexible date picker](https://github.com/gpbl/react-day-picker) 24 | - [React Daterange Picker](https://onefinestay.github.io/react-daterange-picker/) 25 | - [React.js Yearly Calendar Component](https://github.com/BelkaLab/react-yearly-calendar) 26 | - [react-calendar](http://freiksenet.github.io/react-calendar/) 27 | - [input-moment](https://wangzuo.github.io/input-moment/) 28 | - [react-bootstrap-datetimepicker](http://dev.quri.com/react-bootstrap-datetimepicker/) 29 | - [昨天-最近七天-最近三十天选择](https://projects.skratchdot.com/react-bootstrap-daterangepicker/) 30 | - [react-big-calendar](http://intljusticemission.github.io/react-big-calendar/examples/index.html) 31 | - [react-date-select](https://jedwatson.github.io/react-date-select/) 32 | - [react-infinite-calendar](https://clauderic.github.io/react-infinite-calendar/#/basic-settings/basic-configuration?_k=dftcq8) 33 | - [react-dates](https://github.com/airbnb/react-dates) 34 | 35 | 列表选择 36 | --- 37 | 38 | - [树形列表选择-tree-select](https://github.com/react-component/tree-select) 39 | - [树形列表选择-带图标](https://github.com/react-component/tree) 40 | - [react-select](http://jedwatson.github.io/react-select/) 41 | - [rc-select下拉选择](https://github.com/react-component/select) 42 | - [dropdown](https://github.com/react-component/dropdown) 43 | - [级联下拉选择](https://github.com/react-component/cascader) 44 | - [react-select-box](http://instructure-react.github.io/react-select-box/) 45 | - [react-aria-menubutton](https://davidtheclark.github.io/react-aria-menubutton/demo/) 46 | 47 | 类型选择tags 48 | --- 49 | 50 | - [输入某些tag来选择高亮](https://github.com/olahol/react-tagsinput#demo) 51 | - [react-autocomplete-input](https://github.com/yury-dymov/react-autocomplete-input) 52 | - [react-tokeninput](https://github.com/instructure-react/react-tokeninput) 53 | - [可以在输入框@用户名查询-editor-mention](https://github.com/react-component/editor-mention) 54 | - [react-tags)](https://github.com/prakhar1989/react-tags) 55 | 56 | 57 | 消息提示 58 | --- 59 | 60 | - [react-alert](https://github.com/schiehll/react-alert) 61 | - [React Notification System](http://igorprado.com/react-notification-system/) 62 | - [react-s-alert](http://react-s-alert.jsdemo.be/) 63 | - [react pop](http://louisbarranqueiro.github.io/reapop/) 64 | - [React Steps-进行到某一步提示条](https://github.com/react-component/steps) 65 | 66 | tooltip 67 | --- 68 | 69 | - [react-tooltip](http://wwayne.com/react-tooltip/) 70 | - [react-tooltip](https://github.com/react-component/tooltip) 71 | - [react-portal-tooltip](https://romainberger.github.io/react-portal-tooltip/#/) 72 | 73 | Photo / Image 图片处理 74 | --- 75 | 76 | - [拖拽上传](https://github.com/react-dropzone/react-dropzone) 77 | - [拖拽图片到指定区域上传](https://github.com/react-component/dropzone) 78 | - [图片上传控件](https://github.com/react-component/cropping) 79 | - [react-image-gallery](https://github.com/xiaolin/react-image-gallery) 80 | - [点击图片加载放大](http://bryce.io/react-intense/) 81 | - [react-image-lightbox](https://fritz-c.github.io/react-image-lightbox/) 82 | - [react-svg-pan-zoom](https://github.com/chrvadala/react-svg-pan-zoom) 83 | - [React Photo Gallery](https://github.com/neptunian/react-photo-gallery) 84 | - [react-images](https://jossmac.github.io/react-images/#examples) 85 | - [react-avatar](https://github.com/Sitebase/react-avatar) 86 | - [react-avatar-editor](https://github.com/mosch/react-avatar-editor) 87 | - [react-image-crop](https://github.com/DominicTobias/react-image-crop) 88 | - [react-image-cropper](https://github.com/jerryshew/react-image-cropper) 89 | 90 | 分页 91 | --- 92 | 93 | - [react-paginate](https://github.com/AdeleD/react-paginate) 94 | - [分页-pagination](https://github.com/react-component/pagination) 95 | 96 | 轮播 97 | --- 98 | 99 | - [轮播滑动切换](https://github.com/akiran/react-slick) 100 | - [轮播切换](https://github.com/FormidableLabs/nuka-carousel) 101 | - [Animate Banner-轮播](https://github.com/react-component/banner-anim) 102 | - [Animate Scroll React Component](https://github.com/react-component/scroll-anim) 103 | 104 | 105 | ICON Loading 106 | --- 107 | 108 | - [icon-anim](https://github.com/react-component/icon-anim) 109 | - [react-emoji-react](https://github.com/conorhastings/react-emoji-react) 110 | 111 | 布局 112 | --- 113 | 114 | - [侧边栏-可自动调整位置显示](https://github.com/react-component/drawer) 115 | - [Tabs](https://github.com/react-component/tabs) 116 | - [流式布局](https://xudafeng.github.io/autoresponsive-react/) 117 | - [可横向垂直无限长的列表](https://coderiety.github.io/react-list/) 118 | 119 | 遮罩 120 | --- 121 | 122 | - [react对话框dialog](https://github.com/react-component/dialog) 123 | - [可调整大小可停靠的组件](https://alexkuz.github.io/react-dock/demo/) 124 | - [react-overlays](https://github.com/react-bootstrap/react-overlays) 125 | - [带有动画效果的对话框遮罩层1](http://madscript.com/boron/) 126 | - [带有动画效果的对话框遮罩层2](https://marcio.github.io/react-skylight/) 127 | - [带有动画效果的对话框遮罩层3](https://chenjiahan.github.io/rodal/) 128 | 129 | 130 | 菜单 131 | --- 132 | 133 | - [可停靠折叠的菜单](https://negomi.github.io/react-burger-menu/) 134 | - [鼠标hover可选择多级的菜单](https://github.com/react-component/menu) 135 | - [侧边栏停靠菜单选择](http://balloob.github.io/react-sidebar/example/) 136 | - [点击旋转运动菜单组件](https://bokuweb.github.io/react-motion-menu/) 137 | - [react-tree-menu](http://mandarinconlabarba.github.io/react-tree-menu/example/index.html) 138 | - [react-metismenu](https://alpertuna.github.io/react-metismenu/) 139 | - [rc-menu](http://react-component.github.io/menu/) 140 | - [react-treebeard](http://alexcurtis.github.io/react-treebeard/) 141 | 142 | Sticky 143 | --- 144 | > Fixed headers / scroll-up headers / sticky elements 145 | 146 | - [上下滚动内容头部隐藏](https://kyleamathews.github.io/react-headroom/) 147 | - [react listview with sticky section header](https://github.com/cht8687/react-listview-sticky-header) 148 | 149 | 自定义滚动条 150 | --- 151 | 152 | - [react-smooth-scrollbar](https://idiotwu.github.io/react-smooth-scrollbar/) 153 | - [react-custom-scrollbars](https://malte-wessel.github.io/react-custom-scrollbars/) 154 | - [react-custom-scroll](http://rommguy.github.io/react-custom-scroll/example/demo.html) 155 | 156 | Tabs 157 | --- 158 | 159 | - [react-tabs](https://reactcommunity.org/react-tabs/) 160 | - [react-tabtab](https://ctxhou.github.io/react-tabtab/) 161 | 162 | Loader 163 | --- 164 | 165 | - [一些loading动画效果react-spinkit](https://github.com/KyleAMathews/react-spinkit) 166 | - [loading spinners](http://madscript.com/halogen/) 167 | - [react-progress-button](https://github.com/mathieudutour/react-progress-button) 168 | - [进度条](https://github.com/react-component/progress) 169 | - [react-lazyload](https://github.com/jasonslyvia/react-lazyload) 170 | 171 | 172 | 图表 173 | --- 174 | 175 | - [awesome-react-components#chart](https://github.com/brillout/awesome-react-components#chart) 176 | 177 | Audio / Video 178 | --- 179 | 180 | - [awesome-react-components#audio--video](https://github.com/brillout/awesome-react-components#audio--video) 181 | 182 | 地图 183 | --- 184 | 185 | - [awesome-react-components#map](https://github.com/brillout/awesome-react-components#map) 186 | 187 | 动画过渡 188 | --- 189 | 190 | - [mobile.ant.design--包含动效模板](mobile.ant.design) 191 | - [react队列动画](https://github.com/react-component/queue-anim) 192 | - [Animate One React Element](https://github.com/react-component/tween-one) 193 | - [anim react element easily ](https://github.com/react-component/animate) 194 | - [自定义的React Trigger，对某些事件触发](https://github.com/react-component/trigger) 195 | - [折叠展开/手风琴](https://github.com/react-component/collapse) 196 | - [React Transition Group-类似于jQuery的fade效果](https://reactcommunity.org/react-transition-group/) 197 | - [react-motion](https://github.com/chenglou/react-motion) 198 | - [react-transitive-number](https://github.com/Lapple/react-transitive-number) 199 | - [react-spark-scroll](http://gilbox.github.io/react-spark-scroll/examples/demo/demo.html) 200 | - [react-router-transition](https://github.com/maisano/react-router-transition) 201 | - [react-mt-svg-lines](https://github.com/moarwick/react-mt-svg-lines) 202 | - [react-flip-move](https://github.com/joshwcomeau/react-flip-move) 203 | - [data-driven-motion](https://tkh44.github.io/data-driven-motion/#/demos) 204 | - [react-web-animation](http://react-web-animation.surge.sh/animate-css) 205 | 206 | color-picker 207 | --- 208 | 209 | - [颜色选择](https://github.com/react-component/color-picker) 210 | - [react-input-color](https://github.com/wangzuo/react-input-color) 211 | - [react-color](https://github.com/casesandberg/react-color) 212 | - [coloreact](https://elrumordelaluz.github.io/coloreact/) 213 | 214 | slider 215 | --- 216 | 217 | - [react-slider 滑块](https://github.com/react-component/slider) 218 | 219 | 220 | 评分 221 | --- 222 | 223 | - [react-star-rating](https://github.com/cameronroe/react-star-rating) 224 | - [react星级评分](https://github.com/react-component/rate) 225 | 226 | 拖拽 227 | --- 228 | 229 | - [react-draggable](https://mzabriskie.github.io/react-draggable/example/) 230 | - [拖拽排序](https://github.com/bokuweb/react-sortable-pane) 231 | - [dropzone](https://react-dropzone.js.org/#proptypes) 232 | - [react-dragula](https://bevacqua.github.io/react-dragula/) 233 | - [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable) 234 | 235 | 富文本编辑器 236 | --- 237 | 238 | - [可嵌入的编辑器核心部分](https://github.com/react-component/editor-core) 239 | - [react-mardown编辑器](https://rexxars.github.io/react-markdown/) 240 | - [react-md-editor](https://jedwatson.github.io/react-md-editor/) 241 | - [react-markdown-editor](https://github.com/jrm2k6/react-markdown-editor) 242 | - [react-quill](https://zenoamaro.github.io/react-quill/) 243 | - [react-ace](http://securingsincity.github.io/react-ace/) 244 | - [react-codemirror](https://jedwatson.github.io/react-codemirror/) 245 | - [face-book-draftjs](https://draftjs.org/) 246 | - [react-trumbowyg](https://github.com/RD17/react-trumbowyg) 247 | - [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) 248 | 249 | 250 | 工具箱 251 | --- 252 | 253 | - [Common Utils For React Component](https://github.com/react-component/util) 254 | - [变量的驼峰命名转换-对后端返回的数据进行处理很实用](https://github.com/domchristie/humps) 255 | - [moment-更方便格式化日期](http://momentjs.com/docs/) 256 | - [normalizr](https://github.com/paularmstrong/normalizr) 257 | 258 | 图标 259 | --- 260 | 261 | - [react-icons](https://react-icons.netlify.com/#/icons/io) 262 | 263 | 移动端 264 | --- 265 | 266 | - [轮播-react-swipe](https://github.com/voronianski/react-swipe) 267 | - [日历选择器](https://github.com/react-component/m-date-picker) 268 | - [m-pull-to-refresh-上啦刷新](https://github.com/react-component/m-pull-to-refresh) 269 | - [列表滚动选择内容-React Mobile Picker Component](https://github.com/react-component/m-picker) 270 | - [React Mobile Tabs Component ](https://github.com/react-component/m-tabs) 271 | - [消息通知组件](https://github.com/react-component/m-notification) 272 | - [m-dialog](https://github.com/react-component/m-dialog) 273 | 274 | 275 | UI Frameworks 276 | --- 277 | 278 | - [ant.design](https://ant.design/docs/react/introduce-cn) 279 | - [mobile.ant.design](http://mobile.ant.design) 280 | - [mobile-onsen](https://onsen.io/) 281 | - [mobile-reactionic](http://reactionic.github.io/) 282 | - [semantic-ui](https://react.semantic-ui.com/introduction) 283 | - [material-ui](http://www.material-ui.com/#/) 284 | - [Onsen UI - Cross-Platform HTML5 Hybrid App Framework](https://github.com/OnsenUI/OnsenUI) 285 | - [elemental-ui](http://elemental-ui.com/) 286 | - [react-ui](https://lobos.github.io/react-ui/0.7/#/alert?_k=k0stzp) 287 | - [UI components for Elasticsearch](http://www.searchkit.co/) 288 | - [react-mdl](https://tleunen.github.io/react-mdl/components/badge/) 289 | - [react-toolbox](http://react-toolbox.io) 290 | 291 | 其他 292 | --- 293 | 294 | - [React UI Components for macOS Sierra and Windows 10.](https://github.com/gabrielbull/react-desktop) 295 | - [ Build virtual reality (VR) experiences with A-Frame and React. ](https://github.com/ngokevin/aframe-react) 296 | - [拥有权限管理-A frontend framework for building admin SPAs on top of REST services](https://github.com/marmelab/admin-on-rest) 297 | 298 | 综合 299 | --- 300 | 301 | - [在线查询你需要的组件](https://devarchy.com/react) 302 | - [常用组件](http://react-component.github.io/badgeboard/) 303 | - [awesome-react-components](https://github.com/brillout/awesome-react-components) 304 | --------------------------------------------------------------------------------