現(xiàn)代 Web 開(kāi)發(fā)在將體驗(yàn)和功能做到極致的同時(shí)，對(duì)于美觀的追求也越來(lái)越高。在推薦完圖形庫(kù)之后，再來(lái)推薦一些精品的獨(dú)立 UI 組件。這些組件可組合在一起，形成美觀而交互強(qiáng)大的 Web UI 。
給 Web 開(kāi)發(fā)人員推薦的通用獨(dú)立 UI 組件（一）（https://my.oschina.net/editorial-story/blog/1501570）
給 Web 開(kāi)發(fā)人員推薦的開(kāi)源圖形庫(kù) —— 2D/3D（https://my.oschina.net/editorial-story/blog/1476483）
給 Web 開(kāi)發(fā)人員推薦的開(kāi)源圖形庫(kù) —— 動(dòng)畫(huà)（https://my.oschina.net/editorial-story/blog/1359292）
給 Web 開(kāi)發(fā)人員推薦的開(kāi)源圖形庫(kù) —— 數(shù)據(jù)可視化（https://my.oschina.net/editorial-story/blog/1490590）
上期已針對(duì)布局（Layout）、Icon（圖標(biāo)）、Progress（進(jìn)度）、Button（按鈕）、Picker（選擇器）進(jìn)行推薦，這期將針對(duì) Overlay（彈出層/彈窗）、Input（輸入）、Content（內(nèi)容/目錄）、Editor（編輯器）、Widget（組件/掛件）等繼續(xù)做一些推薦整理。
一、彈出層/彈窗
1、vex：https://www.oschina.net/p/vex
一個(gè)現(xiàn)代化的對(duì)話(huà)庫(kù)，高度可配置，可隨意定制。vex 很小（壓縮后僅 5.6kb ），有一個(gè)清晰和簡(jiǎn)單的 API ，無(wú)外部依賴(lài)，完全平面風(fēng)格，提供多種樣式。支持同時(shí)打開(kāi)多個(gè)對(duì)話(huà)框，可選單獨(dú)或全部關(guān)閉它們。更適用于移動(dòng)端。
Demo：http://github.hubspot.com/vex/docs/welcome/
請(qǐng)點(diǎn)擊此處輸入圖片描述
2、Notie：https://www.oschina.net/p/notie-js
一個(gè)簡(jiǎn)單干凈的 javascript 通知、輸入和選擇套件，無(wú)外部依賴(lài)。 能輕松定制，可更改顏色以符合你的風(fēng)格和品牌，字體大小會(huì)根據(jù)屏幕尺寸自動(dòng)調(diào)整。
Demo：https://jaredreich.com/notie
請(qǐng)點(diǎn)擊此處輸入圖片描述
3、SweetAlert2：https://www.oschina.net/p/sweetalert2
一個(gè)漂亮、響應(yīng)式、可定制、易用的 JavaScript 彈窗（彈出框），無(wú)任何依賴(lài)。
Demo：https://limonte.github.io/sweetalert2/
請(qǐng)點(diǎn)擊此處輸入圖片描述
二、輸入
1、Cleave.js：http://nosir.github.io/cleave.js/
一款很簡(jiǎn)單的輸入插件，會(huì)自動(dòng)格式化輸入框的文本內(nèi)容。使用它，你不需要編寫(xiě)任何正則表達(dá)式來(lái)控制輸入文本的格式。支持信用卡號(hào)碼、電話(huà)號(hào)碼格式（各個(gè)國(guó)家）、日期格式、數(shù)字格式、自定義分隔符，前綴和塊模式等，提供 CommonJS/AMD 模式以及 ReactJS 組件端口。
Demo：http://nosir.github.io/cleave.js/
請(qǐng)點(diǎn)擊此處輸入圖片描述
2、React Tags Input：https://github.com/olahol/react-tagsinput
用于輸入標(biāo)簽的 React 組件，高度可定制。
Demo：https://olahol.github.io/react-tagsinput/
請(qǐng)點(diǎn)擊此處輸入圖片描述
三、內(nèi)容/目錄
1、React Data Grid：http://adazzle.github.io/react-data-grid/
React 構(gòu)建的類(lèi) Excel 網(wǎng)格組件，具有完整的鍵盤(pán)導(dǎo)航、單元格復(fù)制和粘貼、單元格拖放、凍結(jié)列、列調(diào)整大小、排序、過(guò)濾等功能。支持使用各種格式化程序和編輯器查看和編輯單元格，可快速配置和自定義功能，并快速渲染。
Demo：http://adazzle.github.io/react-data-grid/examples.html#/all-features
請(qǐng)點(diǎn)擊此處輸入圖片描述
2、Slick：https://www.oschina.net/p/jquery-slick
強(qiáng)大的響應(yīng)式輪播組件，支持移動(dòng)設(shè)備滑動(dòng)，支持桌面瀏覽器鼠標(biāo)拖動(dòng)，支持循環(huán)。此外，還支持左右控制、動(dòng)態(tài)添加&刪除&過(guò)濾、自動(dòng)播放、圓點(diǎn)、箭頭、回調(diào)等。react-slick 是它的 react 版。
Demo：http://kenwheeler.github.io/slick/
請(qǐng)點(diǎn)擊此處輸入圖片描述
3、React Paginate：https://github.com/AdeleD/react-paginate
一個(gè) ReactJS 分頁(yè)組件，安裝這個(gè)組件后只需寫(xiě)一點(diǎn)點(diǎn) CSS ，就能實(shí)現(xiàn)下面的分頁(yè)效果。
請(qǐng)點(diǎn)擊此處輸入圖片描述
請(qǐng)點(diǎn)擊此處輸入圖片描述
四、編輯器
1、Draft.js：https://www.oschina.net/p/draft-js
一個(gè)富文本編輯框架，提供一致的模型以及跨瀏覽器差異化的抽象，可以簡(jiǎn)化富文本編輯的要求。它可擴(kuò)展并可定制，可輕松構(gòu)建任何類(lèi)型的富文本輸入，可無(wú)縫適用于 React 應(yīng)用。
Demo：https://draftjs.org/
請(qǐng)點(diǎn)擊此處輸入圖片描述
2、Quill：https://www.oschina.net/p/quill
一款現(xiàn)代化富文本編輯器，基于可擴(kuò)展的架構(gòu)設(shè)計(jì)，提供豐富的 API 進(jìn)行定制。快速且輕量級(jí)，語(yǔ)意標(biāo)簽，標(biāo)準(zhǔn)化 HTML。同時(shí)還保證兼容性，支持 Chrome、Firefox、Safari、Edge、IE 9+ 等主流瀏覽器。
Demo：https://quilljs.com/
請(qǐng)點(diǎn)擊此處輸入圖片描述
五、組件/掛件
音樂(lè) —— React Music：https://github.com/FormidableLabs/react-music
顧名思義，就是個(gè) React 音樂(lè)掛件，支持使用低頻振蕩器來(lái)修改和定義播放音樂(lè)的效果屬性。
Demo：http://reactmusic.surge.sh/
請(qǐng)點(diǎn)擊此處輸入圖片描述
日期 —— React Big Calendar：https://github.com/intljusticemission/react-big-calendar
React 的事件日歷組件，可用于現(xiàn)代瀏覽器。
Demo：http://intljusticemission.github.io/react-big-calendar/examples/index.html
請(qǐng)點(diǎn)擊此處輸入圖片描述
地圖 —— React Google Maps：http://github.com/tomchentw/react-google-maps
React 的 Google Maps 集成組件。
Demo：https://tomchentw.github.io/react-google-maps/
請(qǐng)點(diǎn)擊此處輸入圖片描述
視頻 —— ReactPlayer：https://github.com/CookPete/react-player
一個(gè)可播放各種 URL 的組件，包括文件路徑、YouTube、Facebook、SoundCloud、Streamable、Vidme、Vimeo、Wistia 和 DailyMotion 。它會(huì)解析 URL 并加載相應(yīng)的標(biāo)記和外部 SDK 以播放各種來(lái)源的視頻。
Demo：http://cookpete.com/react-player/
請(qǐng)點(diǎn)擊此處輸入圖片描述
搜索 —— Searchkit：https://www.oschina.net/p/searchkit
一套由 React 構(gòu)建的 UI 組件，旨在快速創(chuàng)建好看的搜索應(yīng)用程序，可按需進(jìn)行自定義。
Demo：http://www.searchkit.co/
請(qǐng)點(diǎn)擊此處輸入圖片描述
驗(yàn)證 —— Redux Auth：https://github.com/lynndylanhurley/redux-auth
react + redux 構(gòu)建的 token 認(rèn)證系統(tǒng)，支持 isomorphic rendering （同構(gòu)渲染）。包含 OAuth2 認(rèn)證組件、郵件認(rèn)證組件，集成 devise token auth ，支持更換主題。
Demo：http://redux-auth.herokuapp.com/
請(qǐng)點(diǎn)擊此處輸入圖片描述
