React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

最後更新於 2022 年 6 月 26 日

不分冷門、熱門,實用或有趣的就會推薦,同類型的庫只會推薦1-3個。

組件庫

大熱的 Antd、Material UI…等,我就不推薦了,我推薦幾個功能豐富又簡潔優雅的組件庫。

Elastic UI

https://elastic.github.io/eui/#/

與普通UI庫的優勢在於有自己的圖表、拖放列表、精美的評論線程、引導提示、自帶表單驗證、自動刷新組件、幾乎能滿足所有需求的日期選擇器、編輯器功能豐富的表格組件…等,豐富程度是讓我考慮下一個project UI用這個 UI 庫來寫的程度。

evergreen

這個應該也算熱門了,github star 數 11.1k

https://github.com/segmentio/evergreen

我很喜歡這個組件庫的樣式,又簡潔又優雅,個人喜歡它的 alert、toaster、popover(會隨著卷軸改變位置)、dialog,預設的就很美。

Element

https://elemefe.github.io/element-react/#/zh-CN/quick-start

預設樣式也是屬於簡潔優雅類型的組件庫,組件內容還是挺豐富的,除了基本的之外還有自帶幻燈片、空狀態、計數器、時間選擇器、上傳、評分、穿梭框、幻燈片、時間線、日曆…等。

Blueprint

https://github.com/palantir/blueprint

star 數 18.1k,也是滿熱門的一個組件庫,樣式較其他組件庫來說比較具有特色,並且針對部分組件有很深入的細節功能,比如說 hotkeys、select (關聯詞、Omnibar…等封裝在一起)、date range input、time zone select

mantine

https://github.com/mantinedev/mantine

一個很新的React組件庫,今年五月份才出的 1.0.0 版,目前已經更新到 2.4.1 版,star數已達到2k。

所有組件自帶暗色主題,也有自己的 hooks,功能齊全,樣式也是屬於簡潔優雅的。

函式庫

Placeholders

https://placeholders.dev/

通過一個 API 接口為你產生指定寬高的圖片佔位符。

react placeholder.dev

React Sortable Tree

https://github.com/frontend-collective/react-sortable-tree

用於樹狀數據的拖放排序組件庫。

DEMO:https://frontend-collective.github.io/react-sortable-tree/?path=/story/basics–minimal-implementation

2be8261c 913a 11e6 9508 4b347ae114b4 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

flume

https://github.com/chrisjpatty/flume

使用由 React 提供支持的用戶友好的節點編輯器從您的應用程序中提取業務邏輯。

DEMO:https://flume.dev/

flume React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

react-chrono

https://github.com/prabhuignoto/react-chrono

時間軸組件庫。

特徵:

  • 三種不同的模式(水平、垂直、垂直交替)渲染時間線。
  • 使用幻燈片模式自動播放時間線。
  • 輕鬆在時間線中顯示圖像和視頻。

DEMO:https://codesandbox.io/s/react-chrono-tree-text-1fcs3?file=/src/App.js

demo3 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

React flow

https://github.com/wbkd/react-flow

是一個用於構建基於節點的圖的庫。您可以輕鬆實現自定義節點類型,它帶有小地圖和圖形控件等組件。

DEMO:https://reactflow.dev/examples/

反應流

react-sortablejs

https://github.com/SortableJS/react-sortablejs

適用於現代瀏覽器和触摸設備的可重新排序的拖放列表,基於 Sortable。

DEMO:https://sortablejs.github.io/react-sortablejs/

react sortable React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

survey-library

https://github.com/surveyjs/survey-library

一個調查及表單生成器,並且可以將調查結果導出為 PDF 的庫。

DEMO:https://surveyjs.io/Examples/Library

surveyjs React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

react-filepond

https://github.com/pqina/react-filepond

FilePond是一個 JavaScript 庫,支援拖移上傳,優化圖像以加快上傳速度,並提供出色的、可訪問的、如絲般流暢的用戶體驗。React FilePond 是 FilePond 的一個方便的組件庫。

filepond animation 01 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

類似的還有 react-dropzone

Chonky

https://github.com/TimboKZ/Chonky

React 的文件瀏覽器組件,它嘗試在您的瀏覽器中重新創建本機文件瀏覽體驗。非常實用的一個庫,你可以在自己的應用中實現類似電腦上的文件夾,可以應用的範圍很廣。

笨拙的預覽

react-guitar

https://github.com/4lejandrito/react-guitar

吉他組件庫,可以進行調音、選擇聲音、和弦以及支持左撇子。

DEMO:https://react-guitar.com/

react guitar React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

SpreadSheet Grid

https://github.com/rowsncolumns

用於在您的應用程序中顯示類似 excel 的電子表格。它讓您可以聲明性地渲染、自定義和開發高性能的 excel 網格。

DEMO:https://rowsncolumns.app/demo

react React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

react-use-pip

https://github.com/DawChihLiou/react-use-pip

能將影片縮小至右下角浮動窗口以便在用戶與其他內容或網站交互時繼續播放媒體。非常有趣的一個庫,體驗效果也挺好的,響應速度很快。

react use pip React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

react-easy-edit

https://github.com/giorgosart/react-easy-edit

允許對 HTML5 輸入組件進行內聯編輯的 React 庫

DEMO:https://codesandbox.io/s/react-easy-edit-sandbox-2y97j

68747470733a2f2f692e696d6775722e636f6d2f767771637165442e676966 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

mafs

https://github.com/stevenpetryk/mafs

一個數學可視化的庫。

DEMO:https://mafs.dev/guides/display/points/

image React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

typeit

https://github.com/alexmacarthur/typeit

JS打字機效果庫,可以控制時間、速度變化、換行、刪除和停頓。

DEMO:https://typeitjs.com/

react-joyride

https://github.com/gilbarbara/react-joyride

引導庫,可以在你的 React 應用中做使用者引導。

DEMO:https://react-joyride.com/

687474703a2f2f67696c626172626172612e636f6d2f66696c65732f72656163742d6a6f79726964652e706e67 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

react-carousel-minimal

https://github.com/sahilsaha7773/react-carousel-minimal

簡單優雅的圖片輪播庫,基本的功能都具備了,包括圖片標號、說明文字、向前向後箭頭、小圓圈索引、縮略圖…等。

128626830 f2920f94 8ca0 4f10 badc 5ba6bbae5a72 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

React-Toastify

https://github.com/fkhadra/react-toastify

React 的 toast 庫,支援滑動關閉、可以用自己的動畫(ex: 適用於 animate.css)、可以在 toast 裡面顯示 react 組件、失去焦點時暫停toast關閉計時、暗色模式…等。

130804494 a9d2d69c f170 4576 b2e1 0bb7f13dd92d React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

v9.0 版本甚至加入了通知中心的 hooks,管理 toast 更方便:

toastify 9.0 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

react-nice-avatar

https://github.com/dapilab/react-nice-avatar

用於生成頭像的庫,頭像設計的還是很可愛的,目前看起來頭像數量不少。

DEMO:https://nice-avatar.dapiok.com/

圖像牆

React Physics Dragger

https://github.com/nickmcmillan/react-physics-dragger

一個很簡單的拖移組件。

DEMO:https://react-physics-dragger-demo.netlify.com/

example.gif

react-simple-keyboard

https://github.com/hodgef/react-simple-keyboard

輕量虛擬鍵盤,可自訂樣式、響應速度很快。

DEMO:https://simple-keyboard.com/demo

keyboard React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

use-tus

https://github.com/kqito/use-tus

使用 tus 響應可恢復文件上傳的 hooks。

DEMO:https://kqito.github.io/use-tus/?path=/story/usetus–basic

tus React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

Replay

https://github.com/vimond/replay

集成第三方播放器庫的組件,支持自適應和高級流媒體。當前涵蓋:Shaka Player和HLS.js,以及原生 HTML5 視頻播放。

DEMO:https://vimond.github.io/replay/#/

player React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

React Idle Timer

https://github.com/SupremeTechnopriest/react-idle-timer

使用者活動時間計時器。

ka-table

https://github.com/komarovalexander/ka-table

具有豐富功能的表格庫,包括編輯、導出打印、過濾分組、分頁、排序、主題…等。

Table

egjs-infinitegrid

https://github.com/naver/egjs-infinitegrid

用於網格布局上的無限瀑布流庫。

DEMO:https://naver.github.io/egjs-infinitegrid/storybook/?path=/story/examples-masonryinfinitegrid–masonry-infinite-grid-template

egjs-infinitegrid

react-insta-stories

https://github.com/mohitk05/react-insta-stories

一個仿 IG 限時動態的庫,還滿有趣的,可以試試。

DEMO:https://mohitk05.github.io/react-insta-stories/

Demo screenshot

lightGallery React

https://github.com/sachinchoolur/lightGallery

一個可定制的、模塊化的、響應式的燈箱畫廊插件。

DOCS:https://www.lightgalleryjs.com/demos/inline/

燈廊

react stepzilla

https://github.com/newbreedofgeek/react-stepzilla

用於具有步驟的引導組件。

DEMO:https://newbreedofgeek.github.io/react-stepzilla/

反應-stepzilla

React Marquee Slider

https://github.com/mxmzb/react-marquee-slider

元素跑馬燈。

DEMO:https://maximzubarev.com/projects/react-marquee-slider/demo

Snipaste 2021 09 04 01 34 24 1 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

tagify

https://github.com/yairEO/tagify

輕量級、高效的標籤輸入組件。

DEMO:https://yaireo.github.io/tagify/

React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

React Hook Form

https://github.com/react-hook-form/react-hook-form

高性能、靈活、易擴展、易於校驗的表單庫,依賴於非受控組件。能減少由於使用者輸入或表單其他值改變時而引起重新渲染的次數,能夠大大提升性能。性能比較:https://github.com/react-hook-form/performance-compare

不能直接和類式組件一起用,但可以構建一個包裹组件然後在類式組件中使用。

DEMO:https://react-hook-form.com/zh/

React hook form React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

React-cropper

https://github.com/react-cropper/react-cropper

一個圖片裁剪庫,響應時間非常快。

DEMO:https://codesandbox.io/s/wonderful-pine-i7fs3

react crop React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

reactjs-popup

https://github.com/yjose/reactjs-popup

一個彈出組件,可以在彈出組件中加入菜單、tooltip,最大特徵就是將 modall, Tooltip, Menu 合併成一個庫,庫的大小很小且完全無障礙,支持TypeScript及全樣式訂製。

 reactjs彈出演示

react-scroll-sync

https://github.com/okonet/react-scroll-sync

能使多個可滾動元素同步滾動。

DEMO:http://react-sync-scroll.netlify.com/

image 2 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

use-clamp-text

https://github.com/drenther/use-clamp-text

一個看似簡單卻非常實用的庫,功能是將過長的文字自動縮減並在後方加上「show more」的字樣,提供使用者展開與摺疊文字。

DEMO:https://codesandbox.io/s/xenodochial-hoover-ty3u49?file=/src/App.js

image React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

React Native Reorderable List

https://github.com/omahili/react-native-reorderable-list

將 FlatList 改良成可拖動式。

Example

uiball-loaders

https://github.com/GriffinJohnston/uiball-loaders

非常美觀的 loading & spinner,使用 CSS、HTML 和少量 SVG 製作。有多達 24 種樣式:

image 1 React 那些好看、有趣、實用的函式庫、組件庫推薦(1)

Emoji Mart

https://github.com/missive/emoji-mart

一個可定制的 web 表情選擇器 HTML 組件。

  • 提供亮色及暗色主題。
  • 有提供 Unicode(Native), Apple, Facebook, Google, Twiiter 的 emoji。
  • emoji 版本可自行挑選,從 1.0 ~ 14.0
EmojiMart
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論