react-component

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

表单表格

• React表单
• React表格
• react-bootstrap-table
• React Input Number
• react-selectable-extended

日期

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

• React Calendar
• time-picker
• react-datepicker
• rc-calendar
• react-date-range
• Flexible date picker
• React Daterange Picker
• React.js Yearly Calendar Component
• react-calendar
• input-moment
• react-bootstrap-datetimepicker
• 昨天-最近七天-最近三十天选择
• react-big-calendar
• react-date-select
• react-infinite-calendar
• react-dates

列表选择

• 树形列表选择-tree-select
• 树形列表选择-带图标
• react-select
• rc-select下拉选择
• dropdown
• 级联下拉选择
• react-select-box
• react-aria-menubutton

类型选择tags

• 输入某些tag来选择高亮
• react-autocomplete-input
• react-tokeninput
• 可以在输入框@用户名查询-editor-mention
• react-tags)

消息提示

• react-alert
• React Notification System
• react-s-alert
• react pop
• React Steps-进行到某一步提示条

tooltip

• react-tooltip
• react-tooltip
• react-portal-tooltip

Photo / Image 图片处理

• 拖拽上传
• 拖拽图片到指定区域上传
• 图片上传控件
• react-image-gallery
• 点击图片加载放大
• react-image-lightbox
• react-svg-pan-zoom
• React Photo Gallery
• react-images
• react-avatar
• react-avatar-editor
• react-image-crop
• react-image-cropper

分页

• react-paginate
• 分页-pagination

轮播

• 轮播滑动切换
• 轮播切换
• Animate Banner-轮播
• Animate Scroll React Component

ICON Loading

• icon-anim
• react-emoji-react

布局

• 侧边栏-可自动调整位置显示
• Tabs
• 流式布局
• 可横向垂直无限长的列表

遮罩

• react对话框dialog
• 可调整大小可停靠的组件
• react-overlays
• 带有动画效果的对话框遮罩层1
• 带有动画效果的对话框遮罩层2
• 带有动画效果的对话框遮罩层3

菜单

• 可停靠折叠的菜单
• 鼠标hover可选择多级的菜单
• 侧边栏停靠菜单选择
• 点击旋转运动菜单组件
• react-tree-menu
• react-metismenu
• rc-menu
• react-treebeard

Sticky

Fixed headers / scroll-up headers / sticky elements

• 上下滚动内容头部隐藏
• react listview with sticky section header

自定义滚动条

• react-smooth-scrollbar
• react-custom-scrollbars
• react-custom-scroll

Tabs

• react-tabs
• react-tabtab

Loader

• 一些loading动画效果react-spinkit
• loading spinners
• react-progress-button
• 进度条
• react-lazyload

图表

• awesome-react-components#chart

Audio / Video

• awesome-react-components#audio--video

地图

• awesome-react-components#map

动画过渡

• mobile.ant.design--包含动效模板
• react队列动画
• Animate One React Element
• anim react element easily
• 自定义的React Trigger，对某些事件触发
• 折叠展开/手风琴
• React Transition Group-类似于jQuery的fade效果
• react-motion
• react-transitive-number
• react-spark-scroll
• react-router-transition
• react-mt-svg-lines
• react-flip-move
• data-driven-motion
• react-web-animation

color-picker

• 颜色选择
• react-input-color
• react-color
• coloreact

slider

• react-slider 滑块

评分

• react-star-rating
• react星级评分

拖拽

• react-draggable
• 拖拽排序
• dropzone
• react-dragula
• react-anything-sortable

富文本编辑器

• 可嵌入的编辑器核心部分
• react-mardown编辑器
• react-md-editor
• react-markdown-editor
• react-quill
• react-ace
• react-codemirror
• face-book-draftjs
• react-trumbowyg
• react-draft-wysiwyg

工具箱

• Common Utils For React Component
• 变量的驼峰命名转换-对后端返回的数据进行处理很实用
• moment-更方便格式化日期
• normalizr

图标

• react-icons

移动端

• 轮播-react-swipe
• 日历选择器
• m-pull-to-refresh-上啦刷新
• 列表滚动选择内容-React Mobile Picker Component
• React Mobile Tabs Component
• 消息通知组件
• m-dialog

UI Frameworks

• ant.design
• mobile.ant.design
• mobile-onsen
• mobile-reactionic
• semantic-ui
• material-ui
• Onsen UI - Cross-Platform HTML5 Hybrid App Framework
• elemental-ui
• react-ui
• UI components for Elasticsearch
• react-mdl
• react-toolbox

其他

• React UI Components for macOS Sierra and Windows 10.
• Build virtual reality (VR) experiences with A-Frame and React.
• 拥有权限管理-A frontend framework for building admin SPAs on top of REST services

综合

• 在线查询你需要的组件
• 常用组件
• awesome-react-components