2017-01-12 17:57:04 +08:00
|
|
|
---
|
2023-08-04 19:27:38 +08:00
|
|
|
group:
|
|
|
|
title: 其他
|
|
|
|
order: 3
|
|
|
|
order: 0
|
2017-01-12 17:57:04 +08:00
|
|
|
title: 社区精选组件
|
|
|
|
---
|
|
|
|
|
2020-06-02 15:59:32 +08:00
|
|
|
`antd` 是基于 Ant Design 设计规范实现的 [高质量 React 组件库](/components/overview),我们倾向于只提供符合该规范且带有视觉展现的 UI 组件,也尽量不重复造轮子。我们推荐使用以下社区已有的优秀实现,与 antd 形成互补。
|
2017-01-12 17:57:04 +08:00
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
| 类型 | 推荐组件 |
|
2021-08-16 19:16:59 +08:00
|
|
|
| --- | --- |
|
2023-11-24 10:56:04 +08:00
|
|
|
| 可视化图表 | [Ant Design Charts](https://charts.ant.design) [AntV 数据可视化解决方案](https://antv.vision/zh) [reactflow](https://reactflow.dev/) |
|
2020-07-16 10:38:19 +08:00
|
|
|
| React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) |
|
2021-04-21 12:12:54 +08:00
|
|
|
| 表单 | [ProForm](https://procomponents.ant.design/components/form) [Formily](https://github.com/alibaba/formily) [react-hook-form](https://github.com/react-hook-form/react-hook-form) [formik](https://github.com/formium/formik) |
|
2019-05-07 14:57:32 +08:00
|
|
|
| 路由 | [react-router](https://github.com/ReactTraining/react-router) |
|
2021-04-13 13:07:58 +08:00
|
|
|
| 布局 | [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) [react-grid-system](https://github.com/sealninja/react-grid-system) [rc-dock](https://github.com/ticlo/rc-dock) |
|
2022-12-27 19:08:04 +08:00
|
|
|
| 拖拽 | [dnd-kit](https://github.com/clauderic/dnd-kit) [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) |
|
2023-01-11 18:33:29 +08:00
|
|
|
| 代码编辑器 | [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror) [react-monaco-editor](https://github.com/react-monaco-editor/react-monaco-editor) |
|
2022-12-27 19:08:04 +08:00
|
|
|
| 富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) |
|
2022-12-27 15:16:14 +08:00
|
|
|
| JSON 编辑器 | [vanilla-jsoneditor](https://github.com/josdejong/svelte-jsoneditor) |
|
2019-05-07 14:57:32 +08:00
|
|
|
| JSON 显示器 | [react-json-view](https://github.com/mac-s-g/react-json-view) |
|
2022-11-06 17:39:01 +08:00
|
|
|
| 拾色器 | [react-colorful](https://github.com/omgovich/react-colorful) [react-color](http://casesandberg.github.io/react-color/) |
|
2022-12-27 19:08:04 +08:00
|
|
|
| 响应式 | [react-responsive](https://github.com/contra/react-responsive) |
|
2019-05-07 14:57:32 +08:00
|
|
|
| 复制到剪贴板 | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) |
|
2022-12-27 19:08:04 +08:00
|
|
|
| 页面 meta 属性 | [react-helmet-async](https://github.com/staylor/react-helmet-async) |
|
2020-02-09 12:39:58 +08:00
|
|
|
| 图标 | [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) [react-icons](https://github.com/gorangajic/react-icons) |
|
2019-05-07 14:57:32 +08:00
|
|
|
| 二维码 | [qrcode.react](https://github.com/zpao/qrcode.react) |
|
2022-12-27 19:08:04 +08:00
|
|
|
| 顶部进度条 | [react-nprogress](https://github.com/tanem/react-nprogress) |
|
2021-08-16 18:40:39 +08:00
|
|
|
| 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
|
2019-05-07 14:57:32 +08:00
|
|
|
| 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
2020-11-24 20:05:13 +08:00
|
|
|
| Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) |
|
2021-12-03 23:54:19 +08:00
|
|
|
| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
|
2022-12-27 19:08:04 +08:00
|
|
|
| 地图 | [google-map-react](https://github.com/istarkov/google-map-react) [@uiw/react-amap 高德地图](https://github.com/uiwjs/react-amap) |
|
2019-09-23 17:05:56 +08:00
|
|
|
| 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
|
2022-09-23 09:56:36 +08:00
|
|
|
| 右键菜单 | [react-contexify](https://github.com/fkhadra/react-contexify) |
|
2019-05-07 14:57:32 +08:00
|
|
|
| Emoji | [emoji-mart](https://github.com/missive/emoji-mart) |
|
2022-12-27 19:08:04 +08:00
|
|
|
| 分割面板 | [react-split-pane](https://github.com/tomkp/react-split-pane) [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) |
|
2020-06-02 15:59:32 +08:00
|
|
|
| 图片裁切 | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) |
|
2019-05-07 14:57:32 +08:00
|
|
|
| 关键字高亮 | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
|
2021-10-14 15:48:33 +08:00
|
|
|
| 文字轮播 | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) |
|
2024-01-18 17:11:15 +08:00
|
|
|
| 动画 | [framer-motion](https://github.com/framer/motion) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://github.com/pmndrs/react-spring) |
|
2021-07-16 12:40:55 +08:00
|
|
|
| 页脚 | [rc-footer](https://github.com/react-component/footer) |
|
2023-01-05 14:07:33 +08:00
|
|
|
| 数字/金额 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
|
2022-12-27 19:08:04 +08:00
|
|
|
| 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) |
|
2024-01-18 17:11:15 +08:00
|
|
|
| 应用程序框架 | [umi](https://github.com/umijs/umi) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |
|
|
|
|
| Flow 流 | [pro-flow](https://github.com/ant-design/pro-flow) [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) |
|
2023-08-18 15:18:51 +08:00
|
|
|
| 电话输入 | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) |
|
2024-01-18 17:11:15 +08:00
|
|
|
| AI 对话界面 | [pro-chat](https://github.com/ant-design/pro-chat) |
|
2024-07-26 03:08:30 +08:00
|
|
|
| PDF | [react-pdf](https://github.com/diegomura/react-pdf) [@react-pdf/renderer](https://github.com/diegomura/react-pdf) |
|
2017-03-14 20:08:40 +08:00
|
|
|
|
2019-10-14 12:26:44 +08:00
|
|
|
## 推荐产品 ✨
|
|
|
|
|
|
|
|
还有一些常用的前端/设计/产品相关的工具推荐给大家使用。
|
|
|
|
|
2024-07-04 14:50:50 +08:00
|
|
|
| 类型 | 推荐产品 |
|
|
|
|
| --- | --- |
|
|
|
|
| 知识管理 | [🐦 语雀](https://www.yuque.com/?chInfo=ch_antd) |
|
|
|
|
| 图标 | [阿里巴巴矢量图标库](https://www.iconfont.cn) |
|
|
|
|
| Sketch 插件 | [Kitchen](https://kitchen.alipay.com) |
|
|
|
|
| 在线代码编辑 | [stackblitz](https://stackblitz.com) [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
|
2019-10-14 12:26:44 +08:00
|
|
|
|
2017-03-14 20:08:40 +08:00
|
|
|
<style>
|
|
|
|
.markdown table td:first-child {
|
|
|
|
width: 20%;
|
2020-02-09 12:39:58 +08:00
|
|
|
font-weight: 500;
|
2017-03-14 20:08:40 +08:00
|
|
|
}
|
|
|
|
.markdown table td > a:not(:last-child) {
|
2024-07-29 01:33:18 +08:00
|
|
|
margin-inline-end: 18px;
|
2017-03-14 20:08:40 +08:00
|
|
|
}
|
2020-02-09 12:39:58 +08:00
|
|
|
.markdown table td > a:not(:last-child)::after {
|
|
|
|
position: absolute;
|
2017-03-14 20:08:40 +08:00
|
|
|
margin: 0 6px 0 8px;
|
2020-02-09 12:39:58 +08:00
|
|
|
color: #bbb;
|
|
|
|
content: '|';
|
2017-03-14 20:08:40 +08:00
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
</style>
|