React Components

Source: https://github.com/brillout/awesome-react-components at 66b2758c4808
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

完全真棒 React 元件庫( L)

這是 AWESOME 元件清單。不,這不是一份完整的列表 React 在太陽下 “了不起”是什么意思? 嗯:

這能解決真正的問題
以獨特、美麗或非凡的方式 (而且它不是超受歡迎的和众所周知的… )
最近 code 投入!

尋找一個真正令人驚訝的計畫。尋找快速的維護者評論與評論,

另见: Awesome React Frameworks.

维护者 :

@petebray, author of Fluxguard — monitor PROD website changes.
@brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

捐款

請回想一下提供指南。如果你也移除了新的資源請只公關一個新的資源

表格

UI 构成部分
- 可編輯資料格/ 工作表
- 表
- 无限卷
- 覆寫
- 通知
- 工具提示
- 選單
- 粘度
- 分頁
- 載入器
- 隊長
- 汽車
- 按鈕
- 折叠
- 圖示
- 命令調色板
- 樹
- UI 導覽
- 自訂卷列
- 音效/ 影像
- 地圖
- 時間 / 日期 / 年齡
- 照片/ 影像
- 圖示
- 占卜器
- Markdown 查看器
- 帆布
- 截圖
- 其他
- 窗体元件
  - 日期/ 采時器
  - 愛莫吉采摘者
  - 輸入類型
  - 自動完成
  - 選擇
  - 采色器
  - 切換
  - 滑動器
  - 電台按鍵
  - 類型選擇
  - 標籤輸入
  - 自動大小輸入/ 文字區域
  - 星等
  - 拖放
  - 可排序清單
  - 富文字編輯器
  - Markdown 編輯器
  - 影像編輯
  - 窗体元件收藏
  - 其他
  - 語法突顯
UI 布局
UI 動畫
- 参数
UI 框架
UI 公用事业
Code Design
公用事业
性能
Dev 工具
- 測試
- Redux
- 檢查
- 其他
其他
- 靜態網站產生器
云解
- 數據庫

UI 构成部分

Back to top ⬆️

可編輯資料格/ 工作表

AG Grid - 支援高级資料格/ 資料表 Javascript / React / AngularJS / Web 元件。
fortune-sheet - 提供與Excel一樣的外置功能。
gigatables-react - 排序、頁面/無限卷轴、全球/列搜索、 AJAX 還有更多
Handsontable - demo - docs - 數據網格,有類似电子表格 UI 支援 React, Angular, TypeScript 和 JavaScript.
jqwidgets-react-grid - 過度、插座、群組、匯出到 Excel, PDF更多
MUI X Data grid - demo/docs - 快速而可定制的數據網格,
react-data-grid - 外形的网格
ReactGrid - demo/docs - 在您的應用程式中加入類似电子表格的行為
revo-grid - demo/docs - 電源全數據網格 React / AngularJS / Vue / 有高级定制的 Web 元件。
SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
SVAR React DataGrid - demo - docs - React DataGrid 具有儲存格內編輯,樹狀資料,上下文選單,虛擬卷動等功能.

表

ka-table - demo - 可自訂的表格元件,包括排序、过滤、分组、虛擬化、編輯等。
mantine-datatable - demo/docs - 曼汀的輕量级表格元件 UI 應用程式, 有很多功能
material-table - demo/docs - 建在 Material UI, 加: 群組、樹狀資料、可擴張行、匯出、內線編輯
mui-datatables - 建于 Material UI。搜尋、造型、过滤、大小變更/隱藏列、匯出、列印、選取/展開列。
react-data-table - demo/docs - 方便、有反應、有目的、可宣傳的表格,包括排序、可選擇的行、可擴展的行、帕吉尼化
TanStack Table - demo -無頭 UI 用于建立強大的表格和資料格( D)
react-table-library - demo - React 表格庫 — — 一個幾乎沒有頭的表格庫 — — 以建構更好的表格。
rsuite-table - demo/docs - 支持虛擬化的表格元件。
DevExtreme React Grid - 基于高性能插件的資料格 Bootstrap 和 Material Design.
Smart React Grid - 快速且功能完整的資料網格 Material Design.
simple-table - demo - docs - 輕量级快速富有特色排序/ filtering, 虛擬化, 樹狀資料, 嵌套頭, 固定欄, 定制型態等。
KendoReact Grid - 強大的數據網格元件, 具有100+的即時使用功能, 例如傳呼, 排序, 匯出到Excel, 以及更多。
Material-React-Table - 完全的 Material UI 五五 React 表V8: TypeScript

无限卷

@egjs/react-infinitegrid - npm - demo - 套用於安排卡片元素的模組, 包括無限地按照不同的佈局類型排列內容。
react-lazyload - 輕鬆的裝填您的元件影像或其他任何東西
react-list - 多功能的無限卷轴 React 构成部分。
@af-utils/virtual - demo/docs - 翻譯大張的可滚动清單和格子
react-window - demo - React 高效提供大列表和表格資料的元件
virtua - demo - 零配置、快速和小(~3kB)虛擬清單元件 React, Vue 和固体。

覆寫

Display 覆蓋 / 模式 / 提醒 / 對話框 / 燈盒 / 彈出

react-aria-modal - 完全无障碍和灵活 React 按下列方式构建 WAI-ARIA 作者做法。
react-modal - 可用的模式對話框元件 React.
@paratco/async-modal - 簡單的同樣模式處理器 React.
reoverlay - demo - 缺乏管理模式的解決方法。
sweetalert2 - demo/docs - 美貌、有求必应、高度定制和易用(WAI-ARIA取代: JavaScript彈出盒零依附.
sweetalert2-react-content - 官方 SweetAlert2 新增支援器 React 元素為內容

通知

Toaster / 小吃列 — 用模特兒的便便通知使用者

react-notifications-component - demo - 通知高度定制和易于使用。
notistack - demo - docs - 高度定制的可以堆放在相互之上的通知小吃
react-local-toast - demo - docs - 顯示與特定元件相關的回應而不是全體的土司
react-toast - demo - docs - 最低限度的吐司通知。
🚀 react-toastify - demo -現在最好下注虎克支持. 沒有裁判
react-confirm-lite - demo - 是輕量級的,基于承諾的確認對話框 React 內置 Tailwind CSS 支持。它的設計是, react- 保存,同时保持完全定制。
reapop - A React & Redux 通知制度。
react-hot-toast - demo -吸熱通知 React輕而易舉隨時隨地美麗
Sonner - 敬酒部分 React.

工具提示

react-tooltip - React 工具提示元件。

選單

單位列( M)

hamburger-react - demo/docs - 動畫漢堡選單圖示 React.
react-burger-menu - 一個有效果和風格的窗外走廊
react-offcanvas - 空白選單 React.
react-planet - demo - 建立看起來像行星的圓形菜單。
mantine-contextmenu - demo/docs - 用 Maintine 建造的應用程式的上下文選單钩/元件 UI.

粘度

Fixed 信头 / 滚动式信头 / 粘附元素

react-headroom - 藏好你的頭,直到你需要它。
react-stickynode - 表演者和全面者 React 黏糊糊的

分頁

react-tabs - React 选项卡元件。
react-tabtab - React分頁

載入器

Loaders / 旋轉器 / 進度列─讓使用者知道有東西在載入

react-loader-spinner - 收藏集 react- 做合成操作的
react-redux-loading-bar - 簡單載入列 Redux 和 React.
react-spinners-css - 惊人的收藏 react 旋轉元件
react-spinners - 裝入旋轉元件的集合 react.
react-content-loader - SVG 權力元件可以輕易建立占位符加載( 如Facebook的卡加載) 。

隊長

react-simple-captcha - npm - demo - React 簡單的Captcha是一個非常強大的,高度定制的,容易使用Captcha的 React 联合材料。
procaptcha - demo - docs - 隱私專注自由的CAPTCHA

汽車

@egjs/react-flicking - npm - demo - 可靠、灵活和可伸展的木馬
react-awesome-slider - demo - 全頁,3D動畫,60fps媒體和內容滑行器/漫畫。
pure-react-carousel - 是從零開始建造的,沒有太多的意見
react-id-swiper - 使用危險的 Swiper 的圖書館 ReactJs 构成部分
react-instagram-zoom-slider - demo - 由Instagram啟示的滑行器元件,可以縮放能力。
react-responsive-carousel - React.js 應答卡魯塞爾(與斯威普).
react-slick - React 木乃伊元件
keen-slider - demo - 表演木乃伊/滑板 native 摸/擦的行為。
swiper - demo - docs -最現代的自由動觸摸滑翔機硬件加速轉換和驚人 native 行為

按鈕

react-awesome-button - demo - 3D動畫60fps按鈕, 包含載入進度和社交分享動作。
reactive-button - demo - docs - 有進度指示器的美麗動畫按鈕元件。

折叠

react-accessible-accordion - 存取元件 React.
react-collapse - 崩溃動畫的元件包 react- 動手
react-tabbordion - demo - 通用、語言和 CSS-只有建立Antions和Tabs的元件

圖示

在圖中播放資料( D)

essential js 2 charts - 漂亮且互動性的圖表( G) react.
EazyChart - demo - docs - 容易把數據轉換成有意义的海圖
echarts for react - 包圍美麗的 Apache 圖片
jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
react-chartist - React Chartist.js 的元件
react-charty - demo - 小型但強大的互動性數據, 包括多個圖型, 動畫, 放大, 它們。
react-chartjs-2 - 常见 react 使用 Chart.js 2. 0 圖示元件。
react-d3-components - D3 部件 React.
react-google-charts - React-古格勒圖 React 构成部分。
react-highcharts - React-高射手
react-sparklines - 美麗而明亮的火花線 React 构成部分。
react-timeseries-charts - 宣傳時序圖
react-vis - 以 React 和 d3.
recharts - 重新定義圖表庫 React 和 D3.
rumble-charts - React 用于建立可堆肥和柔性海圖的元件。
victory - 資料 React.
semiotic - Semiotic 是數據可視化框架 React.
SVAR React Gantt - demo - docs - 自訂、互動的甘特圖元件
DevExtreme React Chart - 高性能外掛程式圖 Bootstrap 和 Material Design.
Smart React Chart - 特色完整圖集。
react-muze - React 包裝 muze(使用 Web Assembly 建立探索性資料可視化的免費資料可視化文庫)
Flowchart React - 流程圖和流程圖設計程式 React.js.
react-dashboard - 不一樣的板子

命令調色板

cmdk - 快速、可堆肥、未定型的命令選單 React.
kbar - demo - 快速、便携和可延伸的 cmd+k 介面。

樹

播放樹狀資料結構( D)

json-edit-react - demo - JSON/Object樹觀察器和編輯器
react-arborist - demo - 完整的樹狀圖:無頭、虛擬、多選、拖放、鍵盤导航、搜尋
react-complex-tree - demo - docs - 具有多選取、拖放和搜尋功能的不可访问樹狀元件
he-tree-react - demo - docs - 可定制的樹 UI、平面數據、樹狀資料、拖放、占位符等

UI 導覽

導覽視窗( W)

react-scroll - React 滚动元件。
react-swipeable-views - A React 捆綁的 Tab 和可刷取的檢視的元件。

自訂卷列

rc-scrollbars - demo - 自訂具有弹性選項和 60 FPS 的卷列
react-custom-scroll - demo - 很容易自訂瀏覽器滚动列 native OS卷的行為。
react-shadow-scroll - 自訂影像并在滚动存在時插入陰影的元件。

音效/ 影像

react-dailymotion - 每日播放器元件 React.
react-player - A react 播放包括YouTube在内的多种網址的元件。
react-soundplayer - 建立自訂的 SoundCloud 播放器 React.
react-youtube - React.js 有電源的YouTube播放器元件。
video-react - 使用 HTML5 World 建造的網路影像播放器 React 文庫。
material-ui-audio-player - 音效播放器 material ui design.
react-vision-camera - 相機元件 React 使用UserMedia。我們可以使用此元件來完成電腦視覺工作, 例如條碼掃瞄、文字辨識等。
react-barcode-qrcode-scanner - 條碼與 QR code 掃描元件 React。它使用 react透過攝像機和Dynamsoft Barcode Reader讀取條碼

地圖

google-map-react - 通用 google 地圖 react 元件, 允許渲染 react 。
mapkit - 使用 MapKit JS 整合蘋果地圖的圖書館,
pigeon-maps - demo - ReactJS 沒有外在依存的地圖。
react-geosuggest - A React Google 地圖位址 API 的自動建議。
react-leaflet - React 。
react-map-gl - A React MapboxGL-js 和覆蓋 API 的包裹。
react-svg-map - demo - 一套顯示交互式 SVG 地圖的元件。

時間 / 日期 / 年齡

播放時間( D)

react-timeago - 簡單的時碼元件 ReactJs.
timeago-react - 格式日期 *** time ago 聲明。如:“3小時前”.
react-google-flight-datepicker - 已實施 Google 飛行日期選取程式 ReactJS.

照片/ 影像

播放影像/ 照片( D)

lightGallery - demo - docs - 完全的光盒畫廊部分。
react-compare-image - demo - React 元件可以使用滑鼠來比對兩張影像。
react-image-gallery - 反射影像畫廊、木乃伊、影像滑化器 react 构成部分。
yet-another-react-lightbox - demo - docs - React 光盒元件。
react-intense - A React 關閉大圖片的檢視元件。
react-photo-album - demo - docs - 反應 React 相片展.
react-svg-pan-zoom - A React 在 SVG 中加入泛和縮放特性的元件。
react-particle-image - demo - 成像成互動粒子
react-imgix - 加入快速、反應迅速的影像,
@frameright/react-image-display-control - 定義縮放區域的智慧反應影像。
zoom-image - demo - docs - 一個微小而強大的框架不可知性文庫,以放大網路上的影像
react-infinite-gallery – Infinite-scroll image gallery component for React apps.

圖示

Display 圖示 / 圖示設定 / emojis

iconify-react - 50+圖示集的40k以上圖示,包括所有流行的圖示和emoji集.
react-icons - 秒 react 使用 ES6 匯入的流行圖示包。
react-open-doodles - 很棒的自由插圖 react 元件。
react-icomoon - 用 react- icomoon 您可以輕而易舉地使用您在 icomoon 中選擇或建立的圖示。
tabler-icons-react - 一套超過450個 MIT 免費授權的高质量 SVG 圖示。
Lucide - 相當美麗的圖示工具箱。開源專案和一叉 Feather 圖示。

占卜器

播放控制元素以 pagnation

react-paginate - A ReactJS 建立 pagination 元件。
react-laravel-paginex - 使用 Laravel 插座 ReactJS (定制).
paginated - React 變更自訂的道具钩子來建立 pagination 。
react-steps - Demo - 反應 React 步者.

Markdown 查看器

播放解析標示源( D)

react-markdown - 渲染 Markdown 如 React 元件。

帆布

使用 CAVG 或 SVG 輸入( S)…

react-konva - React Konva 是 JavaScript 圖書庫,用于畫出與 Konva 框架相關的複雜畫布圖。
react-sketch - 用于 Sletch 的工具 React 基于應用程式, 由 FabricJS 支援
react-sketch-canvas - Demo 自由手向量繪畫工具 React 用 SVG 做畫布。接受滑鼠、觸摸和圖像平板的輸入
react-heat-map - 輕巧的行事曆熱圖 react 建於 SVG 的元件, 自訂的版本 GitHub捐款圖

截圖

html2canvas - 使用 Javascript.

其他

puck - demo -自辦的視覺編輯器 React
react-advanced-news-ticker - demo - 灵活和動畫的垂直新聞勾選元件
react-avatar-generator - 允許使用者建立隨機的 caleidoscope 以用作浮雕。
react-awesome-query-builder - demo - 窗体字段的視覺查詢建構器, 其中 SQL、 MongoDB 和 JSON 匯出
react-blur - React 用于模糊背景的元件。
react-demo-tab - demo - A React 元件以方便建立其他元件的演示。
fastcomments-react - demo - 在頁面或 SPA 上嵌入直播註解線程的快速Comments 元件。
react-pdf-viewer - docs - A React 要查看的元件a PDF 文件。
react-simple-chatbot - demo - 簡單的聊天器元件來建立聊天
react-file-reader-input - 檔案輸入元件, 用于檔案讀取樣式與抽象化的控制。
react-filter-control - 其 React 建立滤波器參數元件 UI.
react-headings - 自動遞增 HTML (h1,h2等) 用于改善存取和SEO, 不管你的元件結構如何, 同时你保持完全控制得到的東西。
react-joyride - 為您建立漫游和導遊 ReactJS 應用程式現在有獨立的工具提示!
react-mouse-select - Demo 可以選擇的元件 DOM 移動滑鼠的元素
react-resizable-and-movable - 可調整和可動元件 React.
react-resizable-box - 可調整的元件 React. #reactjs.
react-searchbox-awesome - demo - 最小化搜索箱。
react-split-pane - React 分割面元件。
react-swipe-to-delete-ios - demo - 以iOS的方式刪除清單中的項目。
react-swipeable-list - demo - 可配置的元件, 用可刷取的項目制成清單。
typography - 一個強大的工具箱,
react-pulse-text - demo/docs - 允許您將其他元件的屬性文字動化。
captcha-image - 允許您產生一個隨機的 Captcha 影像與選項。
react-pdf - 在您的 PDF 中顯示 React 應用像影像一樣容易
react-customizable-chat-bot - Demo - 在幾分鐘內建立符合品牌需要的聊天機
@restpace/schema-form - Demo - 很容易從JSON Schema中建立複雜的形式
react-darkreader - A React 在您網站上新增黑暗/ 夜晚模式的虎克。
react-apple-signin-auth - 蘋果簽名 React 使用官方的苹果JS SDK.
react-mrz-scanner - A React 在護照、簽證卡等上掃描MRZ的元件。它基于 Dynamsoft Label 認證器。

窗体元件

讓使用者輸入資料( L)

日期/ 采時器

日期采摘者/時間采摘者/日期采摘者

date-range-picker - demo - 支持日期、範圍和範圍選取的行事曆元件。
react-big-calendar - Gcal/ 外觀像是行事曆元件。
react-datepicker - 簡單且可重用的日期拾元件 React.
react-day-picker - 弹性日期拾取器 React.
react-flatpickr - 平板 React.
react-simple-timefield - demo - 簡單的時間輸入域。
react-timezone-select - demo - 动态的簡易的時區選擇。根据 react-select.
DevExtreme React Scheduler - 基于高性能外掛程式的排程器/排程器 Material Design.
jQWidgets Scheduler - 功能完成 :
react-calendar - 您的最後行事曆 React 應用程式
react-date-picker - 取日期的人 React 應用程式
schedule-x - Material design 事件行事曆和取日期元件。解體網站 : https://schedule-x.dev/

愛莫吉采摘者

interweave-emoji-picker - A React 由Interweave和Emojibase提供電源。

輸入類型

Masked 輸入, 專業輸入; mail / 電話號碼 / 信用卡 / 等

react-credit-cards - 你付錢的信用卡真漂亮
react-payment-inputs - demo - 零依赖性容器,以帮助支付卡輸入字段。
react-input-mask - demo -又是 react 加入遮罩的元件。
@lunasec/react-sdk - docs - 安全、硬化的元件,可以自動加密/存取所有資料。
react-numpad - demo - 數字、日期和時間的廣泛數據控制
react-multi-email - demo - 格式化多封郵件為使用者類型。

自動完成

自动建議 / 自動完成 / 打字頭( A)

react-autosuggest - WAI-ARIA 符合 React 自动提示元件。
react-typeahead - 純 react- 基於打字機和打字機

選擇

react-aria-menubutton - 完全易用,易主題, React-按下菜單按鈕
react-functional-select - demo - 微大小和微优化的選取元件 React.js.
react-mobile-picker - demo - iOS 像選取的盒子元件。
react-select - 選擇的控件建設於 React 联合材料。
react-column-select - 建立列選取元件 react.
react-select-search - demo - 輕量級選擇元件 React

采色器

coloreact - 小型采色器 React.
react-color - 是取色器小部件的元件 React 應用程式
react-colorful - 微小(2,5 KB), 無依賴性, 快速且易取取色器元件。
react-input-color - React 包含 hsv 顏色拾取器的輸入顏色元件。

切換

@anatoliygatt/heart-switch - demo - 完全有主題功能且可存取的心形切換元件。
react-ios-switch - React 切換元件。
react-toggle - 優雅、可存取的切換元件 React也是一個榮耀的收據盒
ui-switch - 最完整的( T)

滑動器

react-slider - 滑動元件 React.

電台按鍵

react-radio-group - 更好的收音機按鈕。

類型選擇

讓使用者在打字時選擇一些東西( 如標籤)

react-autocomplete-input - 自動完成輸入字段 React.
react-mentions - 提到文字區的人。
rich-textarea - 彩色、突出亮度、装饰文字及自動完成的文字區域。

標籤輸入

讓使用者在單一輸入中加入多個標籤

react-tag-input - 一個非常簡單的標籤元件 React 项目。
react-tagsinput - 簡單 react 輸入標籤的元件。
react-tokeninput - Tokenin输入元件 React.
tagify - demo & docs - 輕量级,高效的 Tags 輸入元件。

自動大小輸入/ 文字區域

react-input-autosize - 自動調整輸入字段 React.
react-autowidth-input - 高度可配置的 & 延伸的自動大小輸入字段。
react-textarea-autosize - < 文本域/ > 元件 React 隨著滿意而增長

星等

react-rating - demo 零依赖度高度定制的分數
react-awesome-stars-rating - demo - 明星評分部分的无障碍。
react-star-rating-input - React.js 用于輸入0-5(或更多)恒星的元件。

拖放

react-beautiful-dnd - 漂亮且可存取的拖放清單 React
react-dnd - 拖放 React.
react-drag-sizing - “Drag to regision” (縮小) 為 React 构成部分。
react-draggable - React 可拖動元件。
react-dragula - 拖拉拉拉的很簡單,很痛
react-dropzone - 簡單 HTML5 拖放區域 React.js.
react-movable - 垂直拖放清單和表格的可存取和最小化(<4kB gzipped)文庫。
react-sortable-pane - 可排序且可重排的面板元件 React.
neodrag - 拖曳的多框架文庫。選擇您的框架, 拖曳 API 的行為會保持原樣。

可排序清單

讓使用者定下清單中的排序( L)…

react-anything-sortable - 排序任何有觸摸支援和 IE8 相容性的孩子。
sortablejs - 列表可以按拖放排序, 在列表內及列表之間。

富文字編輯器

alloyeditor - WYSIWYG 編輯器, 基于 CKEDitor, 完全重寫 UI.
ckeditor4-react - 官方CKEditor 4 富含文字編輯器包裝.
ckeditor5-react - 官方CKEditor 5 豐富的文字編輯器包。
draft-js - A React 建立文字編輯器的框架。
edtr-io - demo - docs - WYSIWYG 網頁編輯器內有插件。
megadraft - Rich Text 編輯器建在草稿的上面。
react-ace - Ace (高级) Code 編輯器包裝器
react-codemirror - demo - 用于 React.
react-contenteditable - React 可編輯內容的分割元件。
react-draft-wysiwyg - WYSIWYG 編輯器建在 DraftJS.
react-editor - 簡單的富文本編輯器, 可以插入影像與 HTML.
react-medium-editor - 中版包。
react-monacoeditor - 摩納哥編輯器元件 React.
react-simple-code-editor - 簡單的無炸藥 code 使用語法突顯的編輯器
react-quill - 奎爾包
react-trumbowyg - Trumbowyg 包裹
remirror - demo - docs - 用于 React.
slate - demo - docs - 一個完全自訂的框架建構豐富的文字編輯器。
smartblock - demo - docs - 基於區域的WYSIWYG編輯器
tiptap - demo - docs 網絡工匠的無頭編輯框架。

Markdown 編輯器

react-simplemde-editor - React 元件包裝 EasyMDE (the most fresh SimpleMDE fork).
react-markdown-editor - A markdown 使用編輯器 React- 倒流。
react-md-editor - 簡單 markdown 具有預覽的編輯器, 已實行 React.js 和 TypeScript.

影像編輯

影像操控( I)

react-avatar-editor - Facebook類似, 外形 / profile 圖片元件。
react-avatar-generator - 產生樂趣的 caleidoscope 供使用者使用。
react-easy-crop - 容易相互作用的剪切/旋轉影像/影像/影像元件。触摸友好。
react-image-crop - 應用影像裁剪工具 React.
react-image-cropper - 影像收割者。
react-advanced-cropper - A react 裁剪程式库以建立完全适合您網站的裁剪程式 design.
react-mobile-cropper - 由Android 裁剪者創作, 根据 react-advanced-cropper.

窗体元件收藏

formsy-material-ui - 范式相容性包裝 Material UI 窗体元件。
formsy-react-components - 一套 React JS元件在形式上使用…react 形式。
react-input-enhancements - 輸入控制的一套增强功能。
react-widgets - 一個 à la 點點, 被打磨、展開、可存取的輸入。

其他

@anatoliygatt/numeric-stepper - demo - 完全有主題性且可存取的數位繼承元件。
interweave - React 安全渲染的文庫 HTML、滤波器屬性、自動包裝符合的文字、產生 emoji 字元, 以及更多。
react-designer - 很容易設定、輕量级、可編輯的向量圖像 react 元件。
react-upload-gallery - React 上傳影像畫廊。拖放、排序、自訂( D) 。

語法突顯

react-syntax-highlighter - 使用內線樣式使用 Prismjs 或 Highlightjs AST 的語法突顯元件。

UI 布局

Back to top ⬆️

應用程式的 UI 排版程式( C)

autoresponsive-react - 自動應用網格布局庫。
hedron - 一個沒有螺旋的軟體格子系統由有風格的元件提供電源
m-react-splitters - 拆分元件, 寫於 TypeScript.
muuri-react - demo - docs - 反應性、可分類、可过滤和可拖曳的网格布局。
react-grid-layout - 可拖曳且可調整的格子布局,有反應性的斷點,用于 React.
react-layman - demo - 有分頁的动态平板布局管理程式
react-masonry-component - @desandro 的梅森瑞的包裹。
react-reflex - 高级 Flex 排版容器元件 React 网络應用程式。
react-spaces - demo/docs - 穩定的、可調整的、可滚动的部件。
react-stonecutter - 動畫網格布局元件。
react-colrow - 反應格布局元件。根据 css 軟體盒。支持片段寬度, 自動增大。
react-schematic - demo - 使用有風格的圖示建立反應應用布局,而不包含任何主題設定

UI 動畫

Back to top ⬆️

data-driven-motion - 輕鬆地激活你的數據
react-animatable - 使用 Web 動畫 API 的動畫庫。
react-anime - 超簡單的動畫圖書館
react-flip-move - 之間的無力動畫 DOM 使用 FLIP 技術改變( 如列表重排) 。
react-gsap-enhancer - 完全使用 React 一起加油
react-tsparticles - 輕巧的元件, 容易產生互動性粒子動畫
react-motion - 一個能解決你動畫問題的泉水
react-mt-svg-lines - 以 SVG 中線動畫。
react-router-transition - 建置於 react- 路由器,電源 react- 動手
react-spring - 以彈簧物理為主的動畫圖書館.
react-ts-typewriter - demo - 任何文字都容易使用和自訂的打字機效果。
framer-motion - 動畫和手勢圖書館
react-spark-scroll - 基于滚动的動作和動畫 react.
react-track - 追蹤位置 DOM 元素。建立很酷的動畫。
react-transitive-number - 將轉換效果套用到數字字串, 即舊的 Groupon 定時器。
react-web-animation - React API 的元件。
auto-size-transition - 根據內部孩子大小动态放大的元件
react-particles-bg - 粒子背景。
gooey-react - demo/docs - 谷歌效果 React,用于外形 blobbing / metaballs.
react-voodoo - demo/samples - 新增動畫引擎, 允許複雜的和機器人/iOs類的動畫, 在 SSR 上渲染滑板, 預測惯性, 多點觸碰等

参数

simple-parallax-js - demo -最容易得到副作用的方法 React 和 JavaScript 在影像上
react-parallax-tilt - demo - 很容易對元件施展偏斜偏斜

UI 框架

Back to top ⬆️

反應

部件的一组 + 应答排版系統

ant-design - demo/docs - A UI Design 中國的語言個人 components 可用。
atlaskit - 阿特拉斯西安官方 UI 函式庫,包含從 badge 到 tree table 的元件。
base web - Base Web是啟動、發展和整合網路產品的基礎。
carbon - demo/docs - A design IBM建造的系統。
cdbreact - demo - docs - 优雅 UI Kit 圖書館與可重新使用的元件,
chakra-ui - demo/docs - 簡單、模組和可存取 UI 您的元件 React 申請
ChatUI - demo/docs - 那 UI design 語言和 React 聊天文库 UI
CoreUI for React - demo/docs - 開放源碼 UI 元件庫。
evergreen - demo/docs - 常青 React UI 按片段排列的框架。
fluentui - 建立美麗的跨平台應用程式的 UX 框架 code, design和互動行為
gestalt - demo/docs - 一套支持普利奇的元件 design 語言
grommet - 企業應用最先进的UX框架。
kokonut-ui - 自由現代與自訂 UI 元件。
Mantine - demo/docs - 具有100+钩子和部件的全功能文库 native 暗色主題支援
orbit - 建造面向旅行的工程的部件。
flowbite-react - 開源 UI 基于 React, Tailwind CSS和Flowbite。
primereact - 完整 UI 包含50+部分的框架 material, bootstrap 和自訂主題。
radix-ui - 建築高品质的未套用、可存取的元件 design 系統和網路應用程式。
react-bootstrap - Bootstrap 用 React.
react-foundation - 基礎為 React 元件。
reakit - demo/docs 建立可存取的丰富網路應用程式工具箱
searchkit - React UI 部件。用Elasticsearch最簡單的搜尋經驗
semantic-ui-react - 官方的語言…UI-React 融合。
semi-design - demo/docs - 現代、全面、灵活 design 系統。
shadcn/ui - demo - docs - 精心設計的部件你可以复制和貼入你的應用程式
shineout - demo - 方便中文的部件:形式元素、导航、桌、樹、樹等。
Tremor - demo - docs - 開源元件來建立圖表和儀表板
untitled-ui-react - demo - 精巧的部件集 React Aria 和 Tailwind CSS.

Material Design

🚀 Material UI - 全套部件建造你自己 design 系統,或從 Material Design.
- Autocomplete - 存取自動完成、组合框、多選項
- Material Icons - 1000+ SVG material 图标。
- Modal - 可用的模式對話框元件。
- Slider - 可用的滑動器元件。
- Table - 表格中包含排序、選擇、圖示化、虛擬化。
- Tree View - 可用的樹狀圖檢視元件 React.
react-essence - 智慧 - 基本 Material Design 框架。
react-materialize - Material design 用于 react由實現的cs提供能量
react-toolbox - 一套 React 使用 Google 的元件 Material Design.
mdbootstrap - React Bootstrap 與 Material Design

手机

antd-mobile - 可配置的 Mobile UI 來自中國
Ionic React - 音效框架: 容易建構 Android, 桌面與進步的 Web Apps code 基座。
OnsenUI - demo/docs - 使用 Material 和平面設計。根據Web元件。

构成部分收藏

blueprint - demo - docs - UI 用于构建複雜體的工具包, 用于桌面( 不是移动) 應用程式的數據密集網頁介面。
dataminr-react-components - 收集可重复使用 React 部件和效用。
shards-react - docs/demo - 美麗而現代 React design 系統。菲利米
aframe-react - 用 A-Frame 建立虛擬的實際經驗 React.
react-admin - 在 REST 和 GraphQL 服務之上建立管理用戶經驗。
refine - demo - docs - 很快就建立數據密集的應用程式。它和蚂蚁一起航行 Design 系統,企業层面 UI 工具箱。
matrix-card - demo - 生成矩阵雨樣式卡片的最簡單的元件。
rsuite - demo/docs - “企業系統產品”的元件套件。
lens-ui - docs - 一套以簡單化為主的构件
Tailwindadmin - docs - 一套制成的沙德CN UI 您可以直接插入您的元件 React/Next.js 项目。

UI 公用事业

Back to top ⬆️

記者

報告計算的樣式( R)

可见度記者

當元件被顯示/ 隱藏時報告( R)…

react-intersection-observer - React API。
react-visibility-sensor - 感應元件。
react-waypoint - A React 元件以執行任何向元素滚动的函數。

度量記者

決定并報告元素的測量( R)…

react-component-queries - 根據您的部件的寬度和/或高度提供道具。
react-container-dimensions - 偵測元素大小變更的包裝元件。
react-dimensions - React 高序元件以取得容器尺寸。
react-height - 用于确定和报告儿童元素高度的元件包件。
react-measure - 計算量度a React 构成部分。
react-sizeme - 做你的 React 了解它們的寬度和高度

裝置輸入

將使用者輸入到動作( T)…

鍵盤事件

react-hotkeys - 宣佈熱點與焦點管理 React.
react-key-handler - React 用于處理鍵盤事件的元件。
react-keydown - 輕量级金鑰下載包裝 React 元件。
react-shortcuts - 從一個地方管理鍵盤捷徑。
useKeyCapture - 自訂的钩子可以讓目標/全球的按鍵收聽者輕鬆。
react-keyboard-navigator - 套房 React 在鍵盤中選擇兄弟姐妹的元件。

滚动事件

react-scroll-components - 一套元件 react 到頁面滚动。

觸摸刷子

react-swipe - 刷新Js React 构成部分。

滑鼠事件

react-hook-mighty-mouse - demo - 用钩子追蹤選取元素上的滑鼠事件。

元標籤

設定元標籤( S), 儿童 <head>_

react-helmet-async - 安全帶盔 React 16+和朋友
react-helmet - 文件主管理員 React.

入口

任意產生元素( R) DOM 節點

react-layer-stack - 簡單但無所不在的強大和不可知的分層系統 React.
react-portal - React 運送模式、燈盒、裝填條的元件… 到文件… body。

測試使用者行為

A/B測試實驗…

react-experiments - React 构成部分 UI 實驗

Code Design

Back to top ⬆️

說明( L) code 設計

資料儲存

数据流 / 數據管理 / 數據儲存 / 元件狀態/ 數據流

baobab-react - React Baobab的融合。
cerebral - 自有調试器的州控制器。
effector-react - React 有效的多層國家管理員
fireproof - demo - docs 純 JS, 零依賴, CRDT 資料庫 - 在瀏覽器中執行並連接任何雲端或後端
RxDB - demo - docs 快速、本地第一、反應性數據庫 JavaScript 應用程式
fluxible - 通用通量應用插件容器。
kea - 高階架构 React 應用程式
react-i13n - 表演者、可伸展和可插件 React 应用程序。
react-redux - 官方 React 裝訂 Redux.
redux-batched-actions - 減少器 + 在單個訂户通知下減少動作的動作。
redux - 可預知的狀態容器 JavaScript 應用程式
reselect - 選擇器文庫 Redux.
resourcerer - REST API 的宣傳資料比對框架
synergies - docs 用于建立可重复使用的表演與分布的上下文狀態文庫 React 狀態邏輯, 藉由协同 atomar 上下文片段。
zustand - docs - 用簡化的通量原理和無沸爐的
teaful - 微小,容易和有力 React 州管理

窗体逻辑

data-driven-forms - 建立所有功能的表格的宣示方式。
formik - 建立沒有眼淚的形狀,
formsy-react - 窗体輸入建立器與驗證器 React 联合材料。
Phormal - Docs & Demos – 反應性,多語化形式與內置驗證,支持暗模式和右至左語言.
react-hook-form - React 用钩子來驗證形式,而不用擔心。
react-jsonschema-form - A React 從 JSONSchema 建立 Web 表格的元件。
react-client-validation - 簡單且超輕巧的驗證 React.
react-final-form - 基于訂閱的州管理表
react-formawesome - 複雜的圖書館可以建立很棒的表格
surveyjs - 高级調查與表格文庫
Formily - 高性能,展開,和 Typescript 友好
hook-form-react - docs - 輕量级、無依赖的解决方案 React 窗体驗證的钩子。

路由器

react-router-component - 宣傳路由器元件 React.
react-router-scroll - React 路由器滚动管理。
react-router - 完整的路由庫 React.
redux-first-history - Redux 第一歷史 - Redux 歷史约束支援 react- 路透 - @ reach/ 路透 - wouter
universal-router - 同形性簡單的中件類型路由器 JavaScript 網絡應用程式。
wouter - 最小化的 ~1.3KB 路由圖書館. 除了钩子什麼都沒有
tanstack-router - 使用內嵌密钥的型態安全路由器( S) URL 州管理

伺服器的介面

在網路上同步获取的元件屬性

react-refetch - 簡單的、宣示性的、可複雜的 React 元件。
redux-connect - 提供解析 Aync 道具的裝潢器 react-路德
axios-react - HTTP 用戶端元件 React.

与伺服器的通訊

apollo-client - 任何 GraphQL 伺服器的簡單缓存客戶端 UI 框架。
react-relay - 中继是 JavaScript 建立以數據為主的框架 React 应用程序。
query - docs 強大的同步狀態管理伺服器狀態公用设施以及 TS/JS 的資料采集, React,固体,斯維爾特和 Vue.

CSS 样式

aesthetic - 一個強大的型態安全框架不可知 CSS-在 JS 文庫中, 用于格式化的元件, 不管是平面物件、匯入樣式表, 或是只參考外部類別名稱。
aphrodite - 它的QQ39; 內在的樣式, 但是它們工作!
inline-style-prefixer - Inline 樣式物件的執行時自動前置器。
@classmatejs/react - 類型名稱焦點元件建構器, 其語法如款式元件和 cva 變體的糖。
react-container-query - 模块反應元件。
react-responsive - 媒體查询 react 反應 design.
reactponsive - 反射元件与钩.
styled-components - 元件年代的視覺原始人
stitches - CSS-JS有近零跑時速 SSR 多變支援

HTML 模板

jsx-control-statements - 占卜器 React JSX。

不一樣的應用程式

hypernova - 伺服器端渲染您的服務 JavaScript 查看。
isomorphic-style-loader - 异形 CSS Webpack 的樣式加載器。
react-server - React 配有伺服器渲染的框架
rill - 通用的Web應用框架.
webpack-isomorphic-tools - 您的 Webpack 建立應用程式( 例如 . React).

沸腾

脚手架 / 啟動套件 / Yeoman 產生器 / 堆放群組 / 种子

create-react-app - 建立 React 沒有建構設定的應用程式。
crisp-react - 快速整合 TypeScript 支持多重SPA和避免陷阱。
cra-template-redux-auth-starter - A Redux CRA的啟動式锅炉板
electron-react-boilerplate - 在桌面應用程式上直播編輯開發。
elegant - docs - demo - 簡單 React 快速建立美麗和表達的網絡應用程式框架 Next.js, Tailwind CSS和 Markdown 上膛
extensive-react-boilerplate - 使用 Next.js, Auth( 簽署、簽署、重置密碼、确认郵件、刷新托肯) , Material UI, React 虎形 I18N, 檔案上傳( 支援本地端和亞馬遜 S3 驅動程式), 測試, CI 。
generator-starhackit - 全速起步器
nwb - CLI 工具和不依赖性 React app & 元件和 npm 模組。
nx - 下一代建立具有一等單列支持和強力整合的系統.
PBandJ - 0-Config 重用元件框架。
react-hot-boilerplate - 下一個最小的活版火爐板 ReactJS 專案。
rockpack - 建立簡單的解答 React 使用 SSR 、捆綁、林丁、 5 分鐘內試驗。
create-react-dependency - 建立 react 沒有构建配置的依赖性。
phoenix - 一個簡單的火爐板幫助你做你的 react 使用伺服器侧面渲染和本地化支援的應用程式。
react-enterprise-starter-kit - 高伸展度和表演性 React 企業應用程式的啟動器 Kit , 它有非常容易維持的代碼基礎。
Tailwindadmin - 自由Shadcn Dashboard 樣本建置在 React 和 Tailwind CSS 包含多框架支援

其他

react-inlinesvg - SVG 加载器元件 ReactJS.
react-godfather - 新的功能元件寫法沒有虎克
react-vvm - MVM的新方式 React, 實施清潔的分類, 減少锅爐板, UI 逻辑
react-call - 打給你 React 元件。
redux-auth-patch - 完整的代碼認證系統 react + redux 支持异形渲染。
redux-search - Redux 用于客戶端搜尋的捆綁。
tcomb-react - PropTypes 的替代語法。
react-universal-hooks - : tada: 支援 react 處處的钩子(功能或类元件) 。

公用事业

Back to top ⬆️

qrcode.react - 用于 < QRCode/ > 元件 React.
<qr-code> – A no-dependencies, customizable, animate-able, SVG-based <qr-code> element.
react-children-utilities - 延伸用法 React孩子
react-media - A CSS 媒體查詢元件 React.
react-middle-ellipsis - demo 中間斷長弦而不是末端
react-translate-component - 多語种/ 本地化的文字內容。