現代 Web 開發在將體驗和功能做到極致的同時，對於美觀的追求也越來越高。在推薦完圖形庫之後，再來推薦一些精品的獨立 UI 組件。這些組件可組合在一起，形成美觀而交互強大的 Web UI 。

• 給 Web 開發人員推薦的通用獨立 UI 組件（一）

• 給 Web 開發人員推薦的開源圖形庫 —— 2D/3D

• 給 Web 開發人員推薦的開源圖形庫 —— 動畫

• 給 Web 開發人員推薦的開源圖形庫 —— 數據可視化

上期已針對布局（Layout）、Icon（圖標）、Progress（進度）、Button（按鈕）、Picker（選擇器）進行推薦，這期將針對 Overlay（彈出層/彈窗）、Input（輸入）、Content（內容/目錄）、Editor（編輯器）、Widget（組件/掛件）等繼續做一些推薦整理。

一、彈出層/彈窗

1、vex：https://www.oschina.net/p/vex

一個現代化的對話庫，高度可配置，可隨意定製。vex 很小（壓縮後僅 5.6kb ），有一個清晰和簡單的 API ，無外部依賴，完全平面風格，提供多種樣式。支持同時打開多個對話框，可選單獨或全部關閉它們。更適用於移動端。

Demo：http://github.hubspot.com/vex/docs/welcome/

2、Notie：https://www.oschina.net/p/notie-js

一個簡單幹凈的 javascript 通知、輸入和選擇套件，無外部依賴。 能輕鬆定製，可更改顏色以符合你的風格和品牌，字體大小會根據屏幕尺寸自動調整。

Demo：https://jaredreich.com/notie

3、SweetAlert2：https://www.oschina.net/p/sweetalert2

一個漂亮、響應式、可定製、易用的 JavaScript 彈窗（彈出框），無任何依賴。

Demo：https://limonte.github.io/sweetalert2/

二、輸入

1、Cleave.js：http://nosir.github.io/cleave.js/

一款很簡單的輸入插件，會自動格式化輸入框的文本內容。使用它，你不需要編寫任何正則表達式來控制輸入文本的格式。支持信用卡號碼、電話號碼格式（各個國家）、日期格式、數字格式、自定義分隔符，前綴和塊模式等，提供 CommonJS/AMD 模式以及 ReactJS 組件埠。

Demo：http://nosir.github.io/cleave.js/

2、React Tags Input：https://github.com/olahol/react-tagsinput

用於輸入標籤的 React 組件，高度可定製。

Demo：https://olahol.github.io/react-tagsinput/

三、內容/目錄

1、React Data Grid：http://adazzle.github.io/react-data-grid/

React 構建的類 Excel 網格組件，具有完整的鍵盤導航、單元格複製和粘貼、單元格拖放、凍結列、列調整大小、排序、過濾等功能。支持使用各種格式化程序和編輯器查看和編輯單元格，可快速配置和自定義功能，並快速渲染。

Demo：http://adazzle.github.io/react-data-grid/examples.html#/all-features

2、Slick：https://www.oschina.net/p/jquery-slick

強大的響應式輪播組件，支持移動設備滑動，支持桌面瀏覽器滑鼠拖動，支持循環。此外，還支持左右控制、動態添加&刪除&過濾、自動播放、圓點、箭頭、回調等。react-slick 是它的 react 版。

Demo：http://kenwheeler.github.io/slick/

3、React Paginate：https://github.com/AdeleD/react-paginate

一個 ReactJS 分頁組件，安裝這個組件後只需寫一點點 CSS ，就能實現下面的分頁效果。

四、編輯器

1、Draft.js：https://www.oschina.net/p/draft-js

一個富文本編輯框架，提供一致的模型以及跨瀏覽器差異化的抽象，可以簡化富文本編輯的要求。它可擴展並可定製，可輕鬆構建任何類型的富文本輸入，可無縫適用於 React 應用。

Demo：https://draftjs.org/

2、Quill：https://www.oschina.net/p/quill

一款現代化富文本編輯器，基於可擴展的架構設計，提供豐富的 API 進行定製。快速且輕量級，語意標籤，標準化 HTML。同時還保證兼容性，支持 Chrome、Firefox、Safari、Edge、IE 9+ 等主流瀏覽器。

Demo：https://quilljs.com/

五、組件/掛件

音樂 —— React Music：https://github.com/FormidableLabs/react-music

顧名思義，就是個 React 音樂掛件，支持使用低頻振蕩器來修改和定義播放音樂的效果屬性。

Demo：http://reactmusic.surge.sh/

日期 —— React Big Calendar：https://github.com/intljusticemission/react-big-calendar

React 的事件日曆組件，可用於現代瀏覽器。

Demo：http://intljusticemission.github.io/react-big-calendar/examples/index.html

地圖 —— React Google Maps：http://github.com/tomchentw/react-google-maps

React 的 Google Maps 集成組件。

Demo：https://tomchentw.github.io/react-google-maps/

視頻 —— ReactPlayer：https://github.com/CookPete/react-player

一個可播放各種 URL 的組件，包括文件路徑、YouTube、Facebook、SoundCloud、Streamable、Vidme、Vimeo、Wistia 和 DailyMotion 。它會解析 URL 並載入相應的標記和外部 SDK 以播放各種來源的視頻。

Demo：http://cookpete.com/react-player/

搜索 —— Searchkit：https://www.oschina.net/p/searchkit

一套由 React 構建的 UI 組件，旨在快速創建好看的搜索應用程序，可按需進行自定義。

Demo：http://www.searchkit.co/

驗證 —— Redux Auth：https://github.com/lynndylanhurley/redux-auth

react + redux 構建的 token 認證系統，支持 isomorphic rendering （同構渲染）。包含 OAuth2 認證組件、郵件認證組件，集成 devise token auth ，支持更換主題。

Demo：http://redux-auth.herokuapp.com/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！