Ant Design 官方推荐的这些前端工具,太实用了!

发布于 12 天前  14 次阅读


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


A Student on the way to full stack of Web3.