专栏首页web秀React组件总结——难道还没有你喜欢的组件吗?

React组件总结——难道还没有你喜欢的组件吗?

UI组件

Table / Grid

  1. reactable
  2. ag-grid
  3. react-datagrid
  4. griddle-react
  5. react-data-grid
  6. react-data-components
  7. react-bootstrap-table
  8. reactabular
  9. react-pivot
  10. fixed-data-table
  11. autoresponsive-react
  12. sematable

滚动加载

  1. react-lazyload
  2. react-infinity
  3. react-infinite
  4. react-infinite-grid
  5. react-list
  6. react-virtualized

模态框

  1. react-dock
  2. react-overlays
  3. boron
  4. react-modal2
  5. react-modal
  6. react-skylight
  7. rodal
  8. react-modal-box
  9. react-aria-modal

提示框

  1. react-notification-system
  2. react-notification
  3. react-s-alert
  4. react-crouton

菜单

  1. react-burger-menu
  2. react-sidebar
  3. react-motion-menu
  4. react-offcanvas
  5. react-tree-menu
  6. react-metismenu

Sticky(粘性布局)

  1. react-sticky
  2. react-headroom
  3. react-listview-sticky-header
  4. react-sticky-state
  5. react-stickynode

Tabs

  1. react-tabs
  2. react-simpletabs
  3. react-tabtab

Loading/进度条

  1. halogen
  2. react-ladda
  3. react-progress-button
  4. react-loader
  5. react-spinkit
  6. react-progress-label
  7. react-redux-loading-bar

轮播

  1. react-slick
  2. react-swipe

Charts

  1. react-chartist
  2. d3-react-squared
  3. react-d3-components
  4. recharts
  5. react-chartjs
  6. react-dazzle
  7. react-vis
  8. react-sparkline
  9. react-sparklines
  10. rumble-charts
  11. react-micro-bar-chart
  12. react-timeseries-charts
  13. react-google-charts

Tree

  1. react-treeview
  2. react-ui-tree
  3. react-treebeard

UI Navigation

  1. react-scroll
  2. react-swipe-views

滚动条

  1. react-custom-scrollbars
  2. react-scrollbar
  3. react-smooth-scrollbar
  4. react-gemini-scrollbar
  5. react-custom-scroll

Audio / Video

  1. react-player
  2. react-youtube
  3. react-soundplayer
  4. react-video
  5. react-music
  6. react-dailymotion

Map

  1. react-gmaps
  2. google-map-react
  3. react-googlemaps
  4. react-leaflet
  5. react-geosuggest
  6. react-map-gl

时间处理

  1. react-time
  2. react-timeago

图片处理

  1. react-image-gallery
  2. react-images
  3. react-photo-gallery
  4. react-svg-pan-zoom

图片加载

  1. react-lazyload
  2. react-infinity
  3. react-infinite
  4. react-infinite-grid
  5. react-virtualized
  6. react-lazy-load

其他

  1. react-timesheet
  2. react-intl
  3. react-blur
  4. react-split-pane
  5. typography
  6. react-paginate
  7. react-json-tree
  8. react-icons
  9. react-emoji
  10. react-resizable-and-movable
  11. react-dnr
  12. react-resizable-box
  13. react-file-reader-input
  14. react-pagespeed-score
  15. react-autolink
  16. react-svg-buttons
  17. react-avatar
  18. react-joyride
  19. material-color-hash

表单组件

时间控件

  1. react-datepicker
  2. rc-calendar
  3. react-date-range
  4. react-day-picker
  5. react-daterange-picker
  6. react-yearly-calendar
  7. react-calendar
  8. input-moment
  9. react-datetime
  10. react-bootstrap-datetimepicker
  11. react-bootstrap-daterangepicker
  12. react-big-calendar
  13. react-date-select
  14. react-infinite-calendar

富文本编辑器

  1. react-quill
  2. react-ace
  3. react-contenteditable
  4. react-codemirror
  5. react-medium-editor
  6. draft-js
  7. ritzy
  8. megadraft

Color选择器

  1. react-input-color
  2. react-color
  3. coloreact

Markdown

  1. react-markdown
  2. react-md-editor
  3. react-markdown-editor

UI布局

  1. rgx
  2. react-flexbox
  3. react-masonry-mixin
  4. react-inline-grid
  5. react-layout-components
  6. react-grid-layout
  7. react-masonry-component
  8. react-flexbox-grid
  9. react-stonecutter
  10. flexbox-react
  11. autoresponsive-react
  12. golden-layout
  13. reactwm

UI动画

  1. react-tween-state
  2. react-motion
  3. react-transitive-number
  4. react-spark-scroll
  5. react-motion-ui-pack
  6. react-magic-move
  7. velocity-react
  8. react-track
  9. rc-animate
  10. react-router-transition
  11. react-gsap-enhancer
  12. react-mt-svg-lines
  13. react-flip-move
  14. react.animate
  15. react-anime
  16. animakit-rotator
  17. animakit-elastic
  18. animakit-expander
  19. react-atv-img
  20. react-parallax-component

UI框架

PC

  1. elemental
  2. rctui
  3. belle
  4. react-uikit-components
  5. searchkit
  6. rebass
  7. react-foundation-apps
  8. grommet

Mobile

  1. onsenui
  2. reactionic
  3. touchstonejs

代码设计

数据管理等

  1. react-redux
  2. fluorine-lib
  3. redux-batched-actions
  4. react-i13n
  5. shasta
  6. react-redux-provide
  7. redux-batched-subscribe
  8. reflux
  9. fluxxor
  10. dispatchr
  11. alt
  12. baobab-react
  13. reselect
  14. react-controllables
  15. recompose
  16. redux-ui
  17. redux
  18. mobx-react
  19. cerebral

路由

  1. react-router
  2. react-router-component
  3. redux-router
  4. react-router-scroll
  5. universal-router
  6. rrtr
  7. react-router-redux
  8. react-breadcrumbs
  9. monorouter
  10. cerebral-module-router

CSS / Style

  1. react-responsive
  2. react-css-modules
  3. aphrodite
  4. postcss-js
  5. react-inline-css
  6. classnames
  7. react-container-query
  8. react-look
  9. stilr
  10. react-css-components
  11. inline-style-prefixer

HTML模板

  1. jsx-control-statements
  2. react-templates
  3. hyperx

Tests

  1. ui-harness
  2. redux-test-recorder
  3. legit-tests
  4. unexpected-react
  5. chai-enzyme
  6. react-unit
  7. enzyme
  8. redux-ava
  9. carte-blanche

开发工具

  1. redux-devtools-inspector
  2. redux-devtools-chart-monitor
  3. redux-devtools-dock-monitor
  4. redux-devtools-filterable-log-monitor
  5. redux-devtools-log-monitor
  6. remote-redux-devtools
  7. redux-devtools

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 花3分钟时间掌握var,let和const

    这个话题对于一些老鸟来说可能根本算不上疑问,但对于新手来说也许除了最常见的var之外,let和const较少使用的机会。

    Javanx
  • 3种纯CSS方式实现Tab 切换

    Tab 切换是种很常见的网页呈现形式,不管是PC或者H5都会经常看到,今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式,同时对比一下那种代码更方便,更通...

    Javanx
  • web开发中该用 em 还是 rem 呢?

    em 和 rem这种相对长度单位进行页面排版是web开发中的最好的选择。在页面排版中较好应用em 和 rem,根据设备尺寸缩放显示元素的大小。这就使得组件在不同...

    Javanx
  • 移动端项目快速升级 react 16 指南

    考虑到移动端性能,腾讯企鹅辅导移动端项目使用了更为轻量的 preact(7KB) 及其对应配套 preact-router 等, 考虑到 preact 对 re...

    IMWeb前端团队
  • 求一波star 又一个react仿大众点评小项目

    跟着这个视频做的 React高级实战 打造大众点评 WebApp 这个视频的源代码大家在github上搜 “react 大众” 就能找到。

    mafeifan
  • react基础(react设计模式与最佳实践读书笔记001)

    react如此强大的原因在于其声明式编程的使用。那么如何更加具体的阐释两者的区别呢?

    RobinsonZhang
  • 前端性能:股票交易APP频繁更新怎么破

    源码demo地址:https://github.com/JinJieTan/react-keepAlive-dynamic

    Peter谭金杰
  • react 的state数据更新机制

    杭州前端工程师
  • 从项目中由浅入深的学习react (2)

    react + react-router-v4 + redux +ant-design-mobile+iconfont react-router-v4:路由4...

    火狼1
  • React脚手架 create-react-app 快速上手教程Kotlin 开发者社区

    You can now view hello-react-demo in the browser.

    一个会写诗的程序员

扫码关注云+社区

领取腾讯云代金券