Ant Design 作为一款备受欢迎的 UI 组件库，不仅功能强大，还非常注重用户体验。在官网上还特别推荐了一系列其他实用的工具库，这些工具库能够与 Ant Design 形成互补，提供更为全面和高效的解决方案。通过结合这些工具，可以进一步提升开发效率，实现更出色的用户界面和交互体验，工具列表如下：
- 可视化图表：Ant Design Charts[1]、AntV[2]、reactflow[3]
- React Hooks 库：ahooks[4]
- 表单：ProForm[5]、Formily[6]、react-hook-form[7]、formik[8]
- 路由：react-router[9]
- 布局：react-grid-layout[10]、react-grid-system[11]、rc-dock[12]
- 拖拽：dnd-kit[13]、react-beautiful-dnd[14]、react-dnd[15]
- 代码编辑器：@uiw/react-codemirror[16]、react-monaco-editor[17]
- 富文本编辑器：react-quill[18]
- JSON 编辑器：vanilla-jsoneditor[19]
- JSON 显示器：react-json-view[20]
- 拾色器：react-colorful[21]、react-color[22]
- 响应式：react-responsive[23]
- 复制到剪贴板：react-copy-to-clipboard[24]
- 页面 meta 属性：react-helmet-async[25]
- 图标：react-fontawesome[26]、react-icons[27]
- 二维码：qrcode.react[28]
- 顶部进度条：react-nprogress[29]
- 应用国际化：FormatJS[30]、react-i18next[31]
- 代码高亮：react-syntax-highlighter[32]
- Markdown 渲染：react-markdown[33]
- 无限滚动：rc-virtual-list[34]、react-infinite-scroll-component[35]
- 地图：google-map-react[36]、@uiw/react-amap 高德地图[37]
- 视频播放：react-player[38]、video-react[39]、video.js[40]
- 右键菜单：react-contexify[41]
- Emoji：emoji-mart[42]
- 分割面板：react-split-pane[43]、react-resizable-panels[44]
- 图片裁切：antd-img-crop[45]、react-image-crop[46]
- 关键字高亮：react-highlight-words[47]
- 文字轮播：react-text-loop-next[48]、react-fast-marquee[49]
- 动画：framer-motion[50]、Ant Motion[51]、react-spring[52]
- 页脚：rc-footer[53]
- 数字/金额：react-number-format[54]、react-currency-input-fiel[55]
- 移动端探测：react-device-detect[56]
- 应用程序框架：umi[57]、remix[58]、refine[59]
- Flow 流：pro-flow[60]、react-flow[61]、x6[62]
- 电话输入：react-phone-number-input[63]、antd-phone-input[64]
- AI 对话界面：pro-chat[65]
相关链接
[1] Ant Design Charts: https://charts.ant.design/
[2] AntV: https://antv.vision/zh
[3] reactflow: https://reactflow.dev/
[4] ahooks: https://github.com/alibaba/hooks
[5] ProForm: https://procomponents.ant.design/components/form
[6] Formily: https://github.com/alibaba/formily
[7] react-hook-form: https://github.com/react-hook-form/react-hook-form
[8] formik: https://github.com/formium/formik
[9] react-router: https://github.com/ReactTraining/react-router
[10] react-grid-layout: https://github.com/react-grid-layout/react-grid-layout
[11] react-grid-system: https://github.com/sealninja/react-grid-system
[12] rc-dock: https://github.com/ticlo/rc-dock
[13] dnd-kit: https://github.com/clauderic/dnd-kit
[14] react-beautiful-dnd: https://github.com/atlassian/react-beautiful-dnd/
[15] react-dnd: https://github.com/gaearon/react-dnd
[16] @uiw/react-codemirror: https://github.com/uiwjs/react-codemirror
[17] react-monaco-editor: https://github.com/react-monaco-editor/react-monaco-editor
[18] react-quill: https://github.com/zenoamaro/react-quill
[19] vanilla-jsoneditor: https://github.com/josdejong/svelte-jsoneditor
[20] react-json-view: https://github.com/mac-s-g/react-json-view
[21] react-colorful: https://github.com/omgovich/react-colorful
[22] react-color: http://casesandberg.github.io/react-color/
[23] react-responsive: https://github.com/contra/react-responsive
[24] react-copy-to-clipboard: https://github.com/nkbt/react-copy-to-clipboard
[25] react-helmet-async: https://github.com/staylor/react-helmet-async
[26] react-fontawesome: https://github.com/FortAwesome/react-fontawesome
[27] react-icons: https://github.com/gorangajic/react-icons
[28] qrcode.react: https://github.com/zpao/qrcode.react
[29] react-nprogress: https://github.com/tanem/react-nprogress
[30] FormatJS: https://github.com/formatjs/formatjs
[31] react-i18next: https://react.i18next.com/
[32] react-syntax-highlighter: https://github.com/conorhastings/react-syntax-highlighter
[33] react-markdown: https://remarkjs.github.io/react-markdown/
[34] rc-virtual-list: https://github.com/react-component/virtual-list/
[35] react-infinite-scroll-component: https://github.com/ankeetmaini/react-infinite-scroll-component
[36] google-map-react: https://github.com/istarkov/google-map-react
[37] @uiw/react-amap 高德地图: https://github.com/uiwjs/react-amap
[38] react-player: https://github.com/CookPete/react-player
[39] video-react: https://github.com/video-react/video-react
[40] video.js: http://docs.videojs.com/tutorial-react.html
[41] react-contexify: https://github.com/fkhadra/react-contexify
[42] emoji-mart: https://github.com/missive/emoji-mart
[43] react-split-pane: https://github.com/tomkp/react-split-pane
[44] react-resizable-panels: https://github.com/bvaughn/react-resizable-panels
[45] antd-img-crop: https://github.com/nanxiaobei/antd-img-crop
[46] react-image-crop: https://github.com/DominicTobias/react-image-crop
[47] react-highlight-words: https://github.com/bvaughn/react-highlight-words
[48] react-text-loop-next: https://github.com/samarmohan/react-text-loop-next
[49] react-fast-marquee: https://github.com/justin-chu/react-fast-marquee
[50] framer-motion: https://github.com/framer/motion
[51] Ant Motion: https://motion.ant.design/components/tween-one
[52] react-spring: https://github.com/pmndrs/react-spring
[53] rc-footer: https://github.com/react-component/footer
[54] react-number-format: https://github.com/s-yadav/react-number-format
[55] react-currency-input-fiel: https://github.com/cchanxzy/react-currency-input-field
[56] react-device-detect: https://github.com/duskload/react-device-detect
[57] umi: https://github.com/umijs/umi
[58] remix: https://github.com/remix-run/remix
[59] refine: https://github.com/pankod/refine
[60] pro-flow: https://github.com/ant-design/pro-flow
[61] react-flow: https://github.com/wbkd/react-flow
[62] x6: https://github.com/antvis/x6
[63] react-phone-number-input: https://gitlab.com/catamphetamine/react-phone-number-input
[64] antd-phone-input: https://github.com/ArtyomVancyan/antd-phone-input/
[65] pro-chat: https://github.com/ant-design/pro-chat
本文转载自https://mp.weixin.qq.com/s/UWcb4B4Kb3UuKNyj0CasdA
Comments NOTHING