🚀🚀🚀 量大管饱,一次性推荐20个React组件库!!

文章同步在公众号:萌萌哒草头将军,欢迎关注

量大管饱,今天一次性推荐20个React组件库!

🎉 react-grid-layout

react-grid-layout 是一个用于创建网格布局的 React 库,它允许您以栅格形式布局组件,并支持拖拽和调整大小等交互功能,使得页面布局更加灵活和可定制。

github.com/react-grid-...

🎉 react-beautiful-dnd

react-beautiful-dnd 是一个用于实现漂亮的拖拽和重新排序功能的 React 库,它提供了易于使用的 API 和灵活的配置选项,让您可以轻松地实现拖拽交互。

github.com/atlassian/r...

🎉 react-monaco-editor

react-monaco-editor 是一个基于 Monaco Editor 的 React 封装库,Monaco Editor 是一款功能强大的代码编辑器,支持语法高亮、代码补全、错误提示等功能,适用于构建代码编辑和展示的界面。

github.com/react-monac...

🎉 react-quill

react-quill 是一个用于在 React 应用中集成富文本编辑器的库,它基于 Quill.js 开发,提供了丰富的富文本编辑功能和可定制的界面样式,方便您实现富文本内容的编辑和展示。

github.com/zenoamaro/r...

🎉 react-json-view

react-json-view 是一个用于在 React 应用中美观地显示 JSON 数据的库,它提供了可折叠、可展开和语法高亮等功能,使得 JSON 数据的查看和分析更加方便。

github.com/mac-s-g/rea...

🎉 react-responsive

react-responsive 是一个用于实现响应式设计的 React 库,它提供了方便的组件和钩子函数,使得您可以根据不同的设备或屏幕尺寸来渲染不同的界面,以提供更好的用户体验。

jsx 复制代码
import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return (
    <div>
      <h1>Device Test!</h1>
      {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
      {isBigScreen && <p>You have a huge screen</p>}
      {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
      <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
      {isRetina && <p>You are retina</p>}
    </div>
  )
}

github.com/yocontra/re...

🎉 react-copy-to-clipboard

react-copy-to-clipboard 是一个用于在 React 应用中实现复制文本到剪贴板的功能的库,它提供了简单易用的 API,让用户可以轻松地将文本内容复制到剪贴板中。

github.com/nkbt/react-...

🎉 react-fontawesome

react-fontawesome 是一个用于在 React 应用中使用 FontAwesome 图标的库,FontAwesome 提供了丰富的图标集合,而 react-fontawesome 则提供了方便的组件封装,使得您可以轻松地在 React 应用中使用这些图标。

github.com/FortAwesome...

🎉 react-nprogress

react-nprogress 是一个用于在 React 应用中展示顶部进度条的库,它提供了一种简单的方式来显示页面加载进度,增强用户体验。

github.com/tanem/react...

🎉 react-i18next

react-i18next 是一个用于实现应用国际化的库,它提供了方便的 API 和工具,帮助您轻松地将应用程序翻译成多种语言,以满足不同用户的需求。

github.com/i18next/rea...

🎉 react-syntax-highlighter

react-syntax-highlighter 是一个用于在 React 应用中实现代码高亮的库,它支持多种编程语言和风格,让您的代码在页面上以美观的方式展示。

github.com/react-synta...

🎉 react-markdown

react-markdown 是一个用于在 React 应用中渲染 Markdown 内容的库,它将 Markdown 文本转换为对应的 HTML 元素,使得您可以方便地在应用中展示和处理 Markdown 内容。

github.com/remarkjs/re...

🎉 react-infinite-scroll-component

react-infinite-scroll-component 是一个用于实现无限滚动的 React 库,它支持在滚动到页面底部时自动加载更多内容,适用于需要分页加载或无限滚动的场景。

github.com/ankeetmaini...

🎉 google-map-react

google-map-react 是一个在 React 应用中集成 Google 地图的库,它提供了简单易用的 API,让您可以在应用中显示地图和标记,以及处理地图相关的交互和事件。

github.com/google-map-...

🎉 react-player

react-player 是一个用于在 React 应用中播放视频的库,它支持多种视频格式和源,提供了丰富的播放控制和事件回调,让您可以轻松地在应用中嵌入和管理视频内容。

演示地址:cookpete.com/react-playe...

github.com/cookpete/re...

🎉 react-contexify

react-contexify 是一个用于在 React 应用中实现右键菜单的库,它提供了简单易用的 API,让您可以轻松地创建自定义的右键菜单并处理菜单项的点击事件。

github.com/fkhadra/rea...

🎉 emoji-mart

emoji-mart 是一个用于在 React 应用中使用 Emoji 的库,它提供了丰富的 Emoji 表情和选择器,方便用户在应用中表达情感和交流。

github.com/missive/emo...

🎉 react-split-pane

react-split-pane 是一个用于在 React 应用中创建可拖拽的分割面板布局的库,它允许您在界面中创建多个可调整大小的区域,以实现灵活的布局。

jsx 复制代码
<SplitPane split="vertical">
  <Pane/>
  <Pane/>
  <SplitPane split="horizontal">
    <Pane/>
    <Pane/>
    <Pane/>
  </SplitPane>
  <Pane/>
</SplitPane>

🎉 react-image-crop

react-image-crop 是一个用于在 React 应用中实现图片裁切功能的库,它提供了简单易用的 API 和交互功能,让您可以在应用中对图片进行裁剪和调整。

github.com/DominicTobi...

🎉 react-highlight-words

react-highlight-words 是一个用于在 React 应用中实现关键字高亮的库,

github.com/bvaughn/rea...

🎉 raetable

raetable 是使用 antd 基础组件封装的针对 toB 业务场景的超级组件,一个页面可能只需要一个配置文件就可以实现列表的增删改查。

github.com/mmdctjj/rae...

🚀 最后

今天的分享就到了,希望对你的开发有帮助,如果你也有不错的组件库,欢迎在评论区分享给我大家!

相关推荐
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶5 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json