Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/poetries/react-component

工作中常用的一些react组件
https://github.com/poetries/react-component

react

Last synced: 4 months ago
JSON representation

工作中常用的一些react组件

Awesome Lists containing this project

README 

          
# react-component

> 工作中使用到的一些组件库收集



表单表格

---



- [React表单](https://github.com/react-component/form)

- [React表格](https://github.com/react-component/table)

- [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)

- [React Input Number ](https://github.com/react-component/input-number)

- [react-selectable-extended](https://github.com/leopoldjoy/react-selectable-extended)



日期

---

> Date picker / time picker / datetime picker / date range picker



- [React Calendar](https://github.com/react-component/calendar)

- [time-picker](https://github.com/react-component/time-picker)

- [react-datepicker](https://github.com/Hacker0x01/react-datepicker)

- [rc-calendar](https://github.com/react-component/calendar)

- [react-date-range](https://github.com/Adphorus/react-date-range)

- [Flexible date picker](https://github.com/gpbl/react-day-picker)

- [React Daterange Picker](https://onefinestay.github.io/react-daterange-picker/)

- [React.js Yearly Calendar Component](https://github.com/BelkaLab/react-yearly-calendar)

- [react-calendar](http://freiksenet.github.io/react-calendar/)

- [input-moment](https://wangzuo.github.io/input-moment/)

- [react-bootstrap-datetimepicker](http://dev.quri.com/react-bootstrap-datetimepicker/)

- [昨天-最近七天-最近三十天选择](https://projects.skratchdot.com/react-bootstrap-daterangepicker/)

- [react-big-calendar](http://intljusticemission.github.io/react-big-calendar/examples/index.html)

- [react-date-select](https://jedwatson.github.io/react-date-select/)

- [react-infinite-calendar](https://clauderic.github.io/react-infinite-calendar/#/basic-settings/basic-configuration?_k=dftcq8)

- [react-dates](https://github.com/airbnb/react-dates)



列表选择

---



- [树形列表选择-tree-select](https://github.com/react-component/tree-select)

- [树形列表选择-带图标](https://github.com/react-component/tree)

- [react-select](http://jedwatson.github.io/react-select/)

- [rc-select下拉选择](https://github.com/react-component/select)

- [dropdown](https://github.com/react-component/dropdown)

- [级联下拉选择](https://github.com/react-component/cascader)

- [react-select-box](http://instructure-react.github.io/react-select-box/)

- [react-aria-menubutton](https://davidtheclark.github.io/react-aria-menubutton/demo/)



类型选择tags

---



- [输入某些tag来选择高亮](https://github.com/olahol/react-tagsinput#demo)

- [react-autocomplete-input](https://github.com/yury-dymov/react-autocomplete-input)

- [react-tokeninput](https://github.com/instructure-react/react-tokeninput)

- [可以在输入框@用户名查询-editor-mention](https://github.com/react-component/editor-mention)

- [react-tags)](https://github.com/prakhar1989/react-tags)



消息提示

---



- [react-alert](https://github.com/schiehll/react-alert)

- [React Notification System](http://igorprado.com/react-notification-system/)

- [react-s-alert](http://react-s-alert.jsdemo.be/)

- [react pop](http://louisbarranqueiro.github.io/reapop/)

- [React Steps-进行到某一步提示条](https://github.com/react-component/steps)



tooltip

---



- [react-tooltip](http://wwayne.com/react-tooltip/)

- [react-tooltip](https://github.com/react-component/tooltip)

- [react-portal-tooltip](https://romainberger.github.io/react-portal-tooltip/#/)



Photo / Image 图片处理

---



- [拖拽上传](https://github.com/react-dropzone/react-dropzone)

- [拖拽图片到指定区域上传](https://github.com/react-component/dropzone)

- [图片上传控件](https://github.com/react-component/cropping)

- [react-image-gallery](https://github.com/xiaolin/react-image-gallery)

- [点击图片加载放大](http://bryce.io/react-intense/)

- [react-image-lightbox](https://fritz-c.github.io/react-image-lightbox/)

- [react-svg-pan-zoom](https://github.com/chrvadala/react-svg-pan-zoom)

- [React Photo Gallery](https://github.com/neptunian/react-photo-gallery)

- [react-images](https://jossmac.github.io/react-images/#examples)

- [react-avatar](https://github.com/Sitebase/react-avatar)

- [react-avatar-editor](https://github.com/mosch/react-avatar-editor)

- [react-image-crop](https://github.com/DominicTobias/react-image-crop)

- [react-image-cropper](https://github.com/jerryshew/react-image-cropper)



分页

---



- [react-paginate](https://github.com/AdeleD/react-paginate)

- [分页-pagination](https://github.com/react-component/pagination)



轮播

---



- [轮播滑动切换](https://github.com/akiran/react-slick)

- [轮播切换](https://github.com/FormidableLabs/nuka-carousel)

- [Animate Banner-轮播](https://github.com/react-component/banner-anim)

- [Animate Scroll React Component](https://github.com/react-component/scroll-anim)



ICON Loading

---



- [icon-anim](https://github.com/react-component/icon-anim)

- [react-emoji-react](https://github.com/conorhastings/react-emoji-react)



布局

---



- [侧边栏-可自动调整位置显示](https://github.com/react-component/drawer)

- [Tabs](https://github.com/react-component/tabs)

- [流式布局](https://xudafeng.github.io/autoresponsive-react/)

- [可横向垂直无限长的列表](https://coderiety.github.io/react-list/)



遮罩

---



- [react对话框dialog](https://github.com/react-component/dialog)

- [可调整大小可停靠的组件](https://alexkuz.github.io/react-dock/demo/)

- [react-overlays](https://github.com/react-bootstrap/react-overlays)

- [带有动画效果的对话框遮罩层1](http://madscript.com/boron/)

- [带有动画效果的对话框遮罩层2](https://marcio.github.io/react-skylight/)

- [带有动画效果的对话框遮罩层3](https://chenjiahan.github.io/rodal/)



菜单

---



- [可停靠折叠的菜单](https://negomi.github.io/react-burger-menu/)

- [鼠标hover可选择多级的菜单](https://github.com/react-component/menu)

- [侧边栏停靠菜单选择](http://balloob.github.io/react-sidebar/example/)

- [点击旋转运动菜单组件](https://bokuweb.github.io/react-motion-menu/)

- [react-tree-menu](http://mandarinconlabarba.github.io/react-tree-menu/example/index.html)

- [react-metismenu](https://alpertuna.github.io/react-metismenu/)

- [rc-menu](http://react-component.github.io/menu/)

- [react-treebeard](http://alexcurtis.github.io/react-treebeard/)



Sticky

---

> Fixed headers / scroll-up headers / sticky elements



- [上下滚动内容头部隐藏](https://kyleamathews.github.io/react-headroom/)

- [react listview with sticky section header](https://github.com/cht8687/react-listview-sticky-header)



自定义滚动条

---



- [react-smooth-scrollbar](https://idiotwu.github.io/react-smooth-scrollbar/)

- [react-custom-scrollbars](https://malte-wessel.github.io/react-custom-scrollbars/)

- [react-custom-scroll](http://rommguy.github.io/react-custom-scroll/example/demo.html)



Tabs

---



- [react-tabs](https://reactcommunity.org/react-tabs/)

- [react-tabtab](https://ctxhou.github.io/react-tabtab/)



Loader

---



- [一些loading动画效果react-spinkit](https://github.com/KyleAMathews/react-spinkit)

- [loading spinners](http://madscript.com/halogen/)

- [react-progress-button](https://github.com/mathieudutour/react-progress-button)

- [进度条](https://github.com/react-component/progress)

- [react-lazyload](https://github.com/jasonslyvia/react-lazyload)



图表

---



- [awesome-react-components#chart](https://github.com/brillout/awesome-react-components#chart)



Audio / Video

---



- [awesome-react-components#audio--video](https://github.com/brillout/awesome-react-components#audio--video)



地图

---



- [awesome-react-components#map](https://github.com/brillout/awesome-react-components#map)



动画过渡

---



- [mobile.ant.design--包含动效模板](mobile.ant.design)

- [react队列动画](https://github.com/react-component/queue-anim)

- [Animate One React Element](https://github.com/react-component/tween-one)

- [anim react element easily ](https://github.com/react-component/animate)

- [自定义的React Trigger，对某些事件触发](https://github.com/react-component/trigger)

- [折叠展开/手风琴](https://github.com/react-component/collapse)

- [React Transition Group-类似于jQuery的fade效果](https://reactcommunity.org/react-transition-group/)

- [react-motion](https://github.com/chenglou/react-motion)

- [react-transitive-number](https://github.com/Lapple/react-transitive-number)

- [react-spark-scroll](http://gilbox.github.io/react-spark-scroll/examples/demo/demo.html)

- [react-router-transition](https://github.com/maisano/react-router-transition)

- [react-mt-svg-lines](https://github.com/moarwick/react-mt-svg-lines)

- [react-flip-move](https://github.com/joshwcomeau/react-flip-move)

- [data-driven-motion](https://tkh44.github.io/data-driven-motion/#/demos)

- [react-web-animation](http://react-web-animation.surge.sh/animate-css)



color-picker

---



- [颜色选择](https://github.com/react-component/color-picker)

- [react-input-color](https://github.com/wangzuo/react-input-color)

- [react-color](https://github.com/casesandberg/react-color)

- [coloreact](https://elrumordelaluz.github.io/coloreact/)



slider

---



- [react-slider 滑块](https://github.com/react-component/slider)



评分

---



- [react-star-rating](https://github.com/cameronroe/react-star-rating)

- [react星级评分](https://github.com/react-component/rate)



拖拽

---



- [react-draggable](https://mzabriskie.github.io/react-draggable/example/)

- [拖拽排序](https://github.com/bokuweb/react-sortable-pane)

- [dropzone](https://react-dropzone.js.org/#proptypes)

- [react-dragula](https://bevacqua.github.io/react-dragula/)

- [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable)



富文本编辑器

---



- [可嵌入的编辑器核心部分](https://github.com/react-component/editor-core)

- [react-mardown编辑器](https://rexxars.github.io/react-markdown/)

- [react-md-editor](https://jedwatson.github.io/react-md-editor/)

- [react-markdown-editor](https://github.com/jrm2k6/react-markdown-editor)

- [react-quill](https://zenoamaro.github.io/react-quill/)

- [react-ace](http://securingsincity.github.io/react-ace/)

- [react-codemirror](https://jedwatson.github.io/react-codemirror/)

- [face-book-draftjs](https://draftjs.org/)

- [react-trumbowyg](https://github.com/RD17/react-trumbowyg)

- [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)



工具箱

---



- [Common Utils For React Component](https://github.com/react-component/util)

- [变量的驼峰命名转换-对后端返回的数据进行处理很实用](https://github.com/domchristie/humps)

- [moment-更方便格式化日期](http://momentjs.com/docs/) 

- [normalizr](https://github.com/paularmstrong/normalizr)



图标

---



- [react-icons](https://react-icons.netlify.com/#/icons/io)



移动端

---



- [轮播-react-swipe](https://github.com/voronianski/react-swipe)

- [日历选择器](https://github.com/react-component/m-date-picker)

- [m-pull-to-refresh-上啦刷新](https://github.com/react-component/m-pull-to-refresh)

- [列表滚动选择内容-React Mobile Picker Component](https://github.com/react-component/m-picker)

- [React Mobile Tabs Component ](https://github.com/react-component/m-tabs)

- [消息通知组件](https://github.com/react-component/m-notification)

- [m-dialog](https://github.com/react-component/m-dialog)



UI Frameworks

---



- [ant.design](https://ant.design/docs/react/introduce-cn)

- [mobile.ant.design](http://mobile.ant.design)

- [mobile-onsen](https://onsen.io/)

- [mobile-reactionic](http://reactionic.github.io/)

- [semantic-ui](https://react.semantic-ui.com/introduction)

- [material-ui](http://www.material-ui.com/#/)

- [Onsen UI - Cross-Platform HTML5 Hybrid App Framework](https://github.com/OnsenUI/OnsenUI)

- [elemental-ui](http://elemental-ui.com/)

- [react-ui](https://lobos.github.io/react-ui/0.7/#/alert?_k=k0stzp)

- [UI components for Elasticsearch](http://www.searchkit.co/)

- [react-mdl](https://tleunen.github.io/react-mdl/components/badge/)

- [react-toolbox](http://react-toolbox.io)



其他

---



- [React UI Components for macOS Sierra and Windows 10.](https://github.com/gabrielbull/react-desktop)

- [ Build virtual reality (VR) experiences with A-Frame and React. ](https://github.com/ngokevin/aframe-react)

- [拥有权限管理-A frontend framework for building admin SPAs on top of REST services](https://github.com/marmelab/admin-on-rest)



综合

---



- [在线查询你需要的组件](https://devarchy.com/react)

- [常用组件](http://react-component.github.io/badgeboard/)

- [awesome-react-components](https://github.com/brillout/awesome-react-components)