React npm套件/插件整理

參考來源：

LogoReact and WebAssembly to Rewrite Native Apps

React plugins

官方推薦插件

immutability-helper

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

Immer

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

CSS Framework

Material UI

LogoInstallation - Material UIMUI_hq

React Toolbox

React Toolboxreact-toolbox.io
LogoGitHub - 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

LogoBlueprint – Documentation
LogoGitHub - palantir/blueprint: A React-based UI toolkit for the webGitHub

Cookies

universal-cookie

Logonpm: universal-cookienpm

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 內附的加解密模組。自已宣稱只有低階層度，應該是免責聲明吧。

LogoWeb 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
Logonpm: node-forgenpm

sjcl (Stanford Javascript Crypto Library)

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

JSDoc: Home
LogoGitHub - bitwiseshiftleft/sjcl: Stanford Javascript Crypto LibraryGitHub

crypto-js (已不再維護)

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

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

Logonpm: crypto-jsnpm

@peculiar/webcrypto

無平台相依的加密模組。

Logonpm: webcrypto-corenpm

Authz

next-auth

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

LogoIntroduction | NextAuth.js
官方文件
LogoGitHub - nextauthjs/next-auth-example: Example showing how to use NextAuth.js with Next.jsGitHub
官方範例
LogoGitHub - nextauthjs/next-auth: Authentication for Next.jsGitHub

File Upload

react-dropzone

已試用可用。

Logoreact-dropzone
Logonpm: react-dropzonenpm

Dropzone

Logonpm: dropzonenpm

file-selector

Logonpm: file-selectornpm

Drag & Drop

React DnD

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

LogoReact DnD
Logonpm: react-dnd-html5-backendnpm
Logonpm: react-dnd-touch-backendnpm
LogoReact DnD | 實現可拖曳的任務牆Medium
LogoImplementation 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

LogoGitHub - minop1205/react-dnd-treeview: A draggable / droppable React-based treeview component. You can use render props to create each node freely.GitHub
Webpack App
React DnD TreeView 說明文件

React-Draggable

LogoGitHub - react-grid-layout/react-draggable: React draggable componentGitHub
LogoDrag and Drop Material-UI Component in a React App
LogoReact Draggable 实现拖拽 - 最详细中文教程

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

react-draggable-tree

Logonpm: react-draggable-treenpm

React Beautiful DND

LogoGitHub - 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

說明：檔案拖拉。

Logonpm: react-drag-drop-filesnpm

react-dropzone

說明：檔案拖拉。

Logonpm: react-dropzonenpm

說明：檔案拖拉。

Camera / Crop

React WebCam

已通過評估未測試。

Logonpm: react-webcamnpm

Cropper.js

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

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

已通過評估未測試。

html to image

html2canvas

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

html2canvas - Screenshots with JavaScript
LogoGitHub - niklasvh/html2canvas: Screenshots with JavaScriptGitHub

html-to-image

Logonpm: html-to-imagenpm

node-html-to-image

Logonpm: node-html-to-imagenpm

CSS Animation

React Transition Group

LogoReact Transition Group

為 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

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

Logoreact-springreact-spring
Logo使用 react-spring 打造流暢的使用者體驗JIGSAWYE
Logoreact-spring how to use animated(Component)Stack Overflow
react-spring FAQ

React-Motion

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

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

Tiling Window

react-mosaic

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

Diff

react-diff-viewer

似乎不再維護了，可惜。

LogoGitHub - 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。

Logonpm: react-diff-viewernpm

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

Logonpm: @mockingjay-io/react-diff-viewernpm

jsdiff + diff2html

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

Logonpm: diffnpm
Logonpm: diff2htmlnpm
Logohttps://codesandbox.io/examples/package/jsdiff
diff + diff2html sample
Logodiff2htmldiff2html
diff2html demo
diff2html Sample code
Diff
full jsdiff demo
jsdiff 範例
Logohttps://codesandbox.io/examples/package/react-diff-viewer

react-fast-compare

LogoFormidable: The Digital Product ExpertsFormidable - The Digital Product Experts. We build the modern web.

react-diff-view

Logonpm: react-diff-viewnpm

Render Html

html-react-parser

Logonpm: html-react-parsernpm

react-html-renderer

Logonpm: react-html-renderernpm

Dev Tools / 開發工具

Assert

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

Logonpm: assertnpm
LogoAssert | Node.js v18.2.0 Documentation

Storybook

LogoStorybook 教學：React 篇

React Styleguidist

LogoReact Styleguidist: Isolated React component development environment with a living style guide | React Styleguidist

Native App Like/Corss Platform (跨平台)

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

Electron

LogoIntroduction | Electron

NW.js

LogoGetting Started - NW.js Documentation
LogoNW.js 簡介與使用方法程式前沿

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.

Logo@storybook/cli - StorybookREAFLOW

React Flow

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

LogoReact Flow - An open source library for building node based applications.

beautiful-react-diagrams

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

Logobeautiful-react-diagrams | A tiny collection of lightweight React components for building diagrams with ease

Graphics

PixiJS

LogoPixiJS

GoJS

LogoGoJS

Reagraph

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

Logo@storybook/cli - StorybookREAGRAPH

mxGraph

mxGraph 4.2.2
LogoGitHub - jgraph/mxgraph: mxGraph is a fully client side JavaScript diagramming libraryGitHub
JavaScript Diagram Editor
mxGraph Example

Three.js

LogoThree.js – JavaScript 3D librarythreejs

Phaser

Phaser - A fast, fun and free open source HTML5 game framework

Virtualized lists

react-virtualized

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

react-window

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

React Sortable Tree

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

Previous第一頁留白用於進入編輯模式NextHtml5-QRCode

Last updated