react-component

KO | EN

gitlite — search

#javascript #react #typescript #android #machine-learning #linux #macos #awesome #awesome-list #pytorch #security #openai #mcp #ios

react-component

(★ 22)

工作中常用的一些react组件

react-component Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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)

react-component

react-component Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-component

react-component Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README