React npm套件/插件整理

參考來源：

https://morioh.com/p/a47debb0b54emorioh.com

React plugins

官方推薦插件

immutability-helper

GitHub - kolodny/immutability-helper: mutate a copy of data without changing the original sourceGitHub

Immer

GitHub - immerjs/immer: Create the next immutable state by mutating the current oneGitHub

---

CSS Framework

Material UI

Installation - Material UIMUI_hq

React Toolbox

React Toolboxreact-toolbox.io

GitHub - react-toolbox/react-toolbox: A set of React components implementing Google's Material Design specification with the power of CSS ModulesGitHub

Bulma

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

說明：為 pure css 方案。非常輕量。足以做畫面 layout。尚不支援 InputField 輸入。

已通過試用。

Blueprint

Blueprint – Documentationblueprintjs.com

GitHub - palantir/blueprint: A React-based UI toolkit for the webGitHub

---

Cookies

universal-cookie

https://www.npmjs.com/package/universal-cookiewww.npmjs.com

---

Cypher 加密

Web Crypto API

The Web Crypto API is an interface allowing a script to use cryptographic primitives in order to build systems using cryptography.

Browser 內附的加解密模組。自已宣稱只有低階層度，應該是免責聲明吧。

Web Crypto API - Web APIs | MDNMDN Web Docs

Forge

A native implementation of TLS (and various other cryptographic tools) in JavaScript.

為現在(2025年)優先選取的前端加密函式庫。

安裝套件名稱。

npm i node-forge

https://www.npmjs.com/package/node-forgewww.npmjs.com

sjcl (Stanford Javascript Crypto Library)

備用的前端加密函式庫。到現在(2025/2/3)已六年未更新。留存備用。

JSDoc: Homebitwiseshiftleft.github.io

GitHub - bitwiseshiftleft/sjcl: [DEPRECATED] Stanford Javascript Crypto LibraryGitHub

crypto-js (已不再維護)

以 node.js 平台為基礎的加密模組。

注意：未來已不在維護。本來為優先選取的前端加密函式庫。因官已確認不再維護，故也不建議再使用。

https://www.npmjs.com/package/crypto-jswww.npmjs.com

@peculiar/webcrypto

無平台相依的加密模組。

https://www.npmjs.com/package/webcrypto-corewww.npmjs.com

---

Authz

next-auth

為 next.js 設計的登入認證模組。

Introduction | NextAuth.jsnext-auth.js.org

官方文件

GitHub - nextauthjs/next-auth-example: Example showing how to use NextAuth.js with Next.jsGitHub

官方範例

GitHub - nextauthjs/next-auth: Authentication for the Web.GitHub

---

File Upload

react-dropzone

已試用可用。

react-dropzonereact-dropzone.js.org

https://www.npmjs.com/package/react-dropzonewww.npmjs.com

Dropzone

https://www.npmjs.com/package/dropzonewww.npmjs.com

file-selector

https://www.npmjs.com/package/file-selector#browser-supportwww.npmjs.com

---

Drag & Drop

React DnD

依執行平台搭配 react-dnd-html5-backend 或 react-dnd-touch-backend。

React DnDreact-dnd.github.io

https://www.npmjs.com/package/react-dnd-html5-backendwww.npmjs.com

https://www.npmjs.com/package/react-dnd-touch-backendwww.npmjs.com

React DnD | 實現可拖曳的任務牆Medium

Implementation of Drag & Drop using React Beautiful DND and Material Ui….Medium

參參考：React & React DnD 範例

說明：UI操作可拖拉。

說明2：React Dnd 可能需要與 React-Dnd-Html5-Backend 協作。

React DnD TreeView

GitHub - minop1205/react-dnd-treeview: A draggable / droppable React-based treeview component. You can use render props to create each node freely.GitHub

@storybook/core - Storybookminop1205.github.io

React DnD TreeView 說明文件

React-Draggable

GitHub - react-grid-layout/react-draggable: React draggable componentGitHub

Drag and Drop Material-UI Component in a React Appbonsaiilabs.com

https://kalacloud.com/blog/react-draggable-tutorial/kalacloud.com

說明：UI操作可拖拉。較為簡單版的。可與Material UI協作。

react-draggable-tree

https://www.npmjs.com/package/react-draggable-treewww.npmjs.com

React Beautiful DND

GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with ReactGitHub

請參考：React & React-Beautiful-DND 範例

說明：UI操作可拖拉。可與Material UI協作。

註：已不再更新了，固只留參。

React Drag and Drop Files

說明：檔案拖拉。

https://www.npmjs.com/package/react-drag-drop-fileswww.npmjs.com

react-dropzone

說明：檔案拖拉。

https://www.npmjs.com/package/react-dropzonewww.npmjs.com

說明：檔案拖拉。

---

Camera / Crop

React WebCam

已通過評估未測試。

https://www.npmjs.com/package/react-webcamwww.npmjs.com

Cropper.js

裁剪圖片與簡單圖片處理。

官網：https://fengyuanchen.github.io/cropperjs/

已通過評估未測試。

---

html to image

html2canvas

依然是最佳解 on 2022/6/13。

html2canvas - Screenshots with JavaScripthtml2canvas.hertzen.com

GitHub - niklasvh/html2canvas: Screenshots with JavaScriptGitHub

html-to-image

https://www.npmjs.com/package/html-to-imagewww.npmjs.com

node-html-to-image

https://www.npmjs.com/package/node-html-to-imagewww.npmjs.com

---

CSS Animation

React Transition Group

React Transition Groupreactcommunity.org

為 react 官方建議項目，前身是ReactTransitionGroup與ReactCSSTransitionGroup。 不過本身只處理過場動畫交易，動畫的本體要額外提供。

Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.

ReactTransitionGroup and ReactCSSTransitionGroup have been moved to the react-transition-group package that is maintained by the community.

Animate.css

• 網站：https://animate.style/

• 安裝：npm install animate.css --save

• 說明：為傳統的 CSS Library；提供常用的 CSS 過場動畫。

• 已試用，可應用。

Animate.css 可與 React Transition Group搭配使用。 animate.css 提供動畫，react-transition-group處理動畫過場交易。 範例

react-spring

已試用可用。適用合製作動場動畫。

useSpring | React Springreact-spring.io

https://jigsawye.com/2021/04/23/react-springjigsawye.com

react-spring how to use animated(Component)Stack Overflow

react-spring FAQ

React-Motion

GitHub - chenglou/react-motion: A spring that solves your animation problems.GitHub

已通過評估，未試用。這套也很強大成熟的樣子。

---

Tiling Window

react-mosaic

GitHub - nomcopter/react-mosaic: A React tiling window managerGitHub

---

Diff

react-diff-viewer

似乎不再維護了，可惜。

GitHub - praneshr/react-diff-viewer: A simple and beautiful text diff viewer component made with Diff and React.GitHub

主版react-diff-viewer，然太久未更新不能在React.v17安裝執行。on 2022/6/14。

https://www.npmjs.com/package/react-diff-viewerwww.npmjs.com

為分支版，可在React.v17安裝執行。on 2022/6/14。

https://www.npmjs.com/package/@mockingjay-io/react-diff-viewerwww.npmjs.com

jsdiff + diff2html

現階段首選。on 2022/6/14。

https://www.npmjs.com/package/diffwww.npmjs.com

https://www.npmjs.com/package/diff2htmlwww.npmjs.com

jsdiff examples - CodeSandboxcodesandbox.io

diff + diff2html sample

diff2htmldiff2html

diff2html demo

diff2html Sample code

Diffincaseofstairs.com

full jsdiff demo

jsdiff 範例

react-diff-viewer examples - CodeSandboxcodesandbox.io

react-fast-compare

https://formidable.com/open-source/react-fast-compare/formidable.com

react-diff-view

https://www.npmjs.com/package/react-diff-viewwww.npmjs.com

---

Render Html

html-react-parser

https://www.npmjs.com/package/html-react-parserwww.npmjs.com

react-html-renderer

https://www.npmjs.com/package/react-html-rendererwww.npmjs.com

---

Dev Tools / 開發工具

Assert

說明：非常好用的開發工具。

https://www.npmjs.com/package/assertwww.npmjs.com

Assert | Node.js v25.5.0 Documentationnodejs.org

Storybook

Storybook 教學：React 篇storybook.js.org

React Styleguidist

React Styleguidist: Isolated React component development environment with a living style guide | React Styleguidistreact-styleguidist.js.org

---

Native App Like/Corss Platform (跨平台)

用 Progressive Web App (PWA)模式開發。或由下面模組協助。

Electron

Introduction | Electronwww.electronjs.org

NW.js

Getting Started - NW.js Documentationnwjs.readthedocs.io

https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/218553codertw.com

---

Diagram

REAFLOW

REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability.

@storybook/cli - StorybookREAFLOW

React Flow

A customizable React component for building node-based editors and interactive diagrams

Node-Based UIs in React - React FlowReact Flow

beautiful-react-diagrams

an easy-to-customise functional diagramming library to build diagrams with ease.

beautiful-react-diagrams | A tiny collection of lightweight React components for building diagrams with easeantonioru.github.io

---

Graphics

PixiJS

PixiJS | The HTML5 Creation Engine | PixiJSpixijs.com

GoJS

GoJS - Interactive Diagrams for the Web in JavaScript and TypeScriptgojs.net

Reagraph

Reagraph is a high-performance network graph visualization built in WebGL for React.

Reagraph - a high-performance network graph visualization built in WebGL for Reactreagraph.dev

mxGraph

mxGraph 4.2.2jgraph.github.io

GitHub - jgraph/mxgraph: mxGraph is a fully client side JavaScript diagramming libraryGitHub

JavaScript Diagram Editorjgraph.github.io

mxGraph Example

Three.js

Three.js – JavaScript 3D librarythreejs

Phaser

http://phaser.iophaser.io

---

Virtualized lists

react-virtualized

GitHub - bvaughn/react-virtualized: React components for efficiently rendering large lists and tabular dataGitHub

react-window

GitHub - bvaughn/react-window: React components for efficiently rendering large lists and tabular dataGitHub

React Sortable Tree

GitHub - frontend-collective/react-sortable-tree: Drag-and-drop sortable component for nested data and hierarchiesGitHub