> 🚀 React Markdown 打字动画组件,提供现代聊天界面效果
npm install ds-markdown> 🚀 React Markdown 打字动画组件,提供现代聊天界面效果
![]()
🇨🇳 中文 | 🇺🇸 English
一个专为现代 AI 应用设计的 React 组件,提供流畅的实时打字动画和完整的 Markdown 渲染能力。





- 流式数据打字卡顿问题
传统打字机组件在处理 AI 后端流式数据时,由于每个 chunk 包含多个字符,会出现卡顿、跳字等问题。ds-markdown 智能拆分每个 chunk,确保每个字符都流畅打字。
- Markdown 渲染与打字动画割裂
大多数打字机组件只支持纯文本,无法在打字过程中实时渲染 Markdown 语法、数学公式、图表等富媒体内容。
- 提升用户沉浸感
提供专业级 AI 聊天体验,让用户感受到真实的 AI 交互过程,极大提升产品专业度和用户满意度。
- 开箱即用,降低开发复杂度
完整的解决方案,无需额外配置即可支持流式数据、Markdown 渲染、数学公式、图表等复杂功能。
> _如果您不需要任何样式,自己处理所有产物的渲染,推荐您使用 react-markdown-typer_
👉 完整文档
- 基本用法
- 流式数据用法
- mermaid图表
- 数学公式demo1
- 数学公式demo2
- 🤖 AI 对话就绪 - 专业的 AI 流式响应打字动画
- 📝 完整 Markdown 支持 - 代码高亮、表格、列表等
- 🔢 数学公式 - KaTeX 支持,$...$ 和 $$...$$ 语法
- 📊 Mermaid 图表 - 流程图、序列图、甘特图等
- 🎨 可定制 - 亮色/暗色主题,可配置打字速度
- ⚡ 高性能 - 轻量级,流畅动画
- 🔌 可扩展 - 插件系统,支持自定义功能
- 📦 TypeScript - 完整类型支持
---
``bashnpm
npm install ds-markdown
快速开始
`tsx
import DsMarkdown from 'ds-markdown';function App() {
return (
# Hello ds-markdown 这是一个高性能的打字动画组件! ## 特性 - ⚡ 零延迟流式处理 - 🎬 流畅打字动画 - 🎯 完美语法支持
);
}
`$3
`tsx
// 显示默认竖线光标
这里是你的 markdown 内容...
// 使用内置光标样式
你的 markdown 内容...
你的 markdown 内容...
你的 markdown 内容...
// 自定义光标元素
|}>
你的 markdown 内容...
`可用的光标类型:
-
line - 竖线(默认)
- block - 实心块
- underline - 下划线
- circle - 圆点
- 自定义 React.ReactNode - 任何自定义的 React 元素核心API文档
详细文档可查看:完整文档
$3
`js
import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
`| 属性 | 类型 | 说明 | 默认值 |
| ------------------- | ------------------------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------- |
|
interval | number \| IntervalConfig | 打字间隔配置,支持固定间隔或动态速度控制 | 30 |
| timerType | 'setTimeout' \| 'requestAnimationFrame' | 定时器类型,不支持动态修改 | 当前默认值是setTimeout,后期会改为requestAnimationFrame |
| answerType | 'thinking' \| 'answer' | 内容类型 (影响样式主题),不支持动态修改 | 'answer' |
| theme | 'light' \| 'dark' | 主题类型 | 'light' |
| plugins | IMarkdownPlugin[] | 插件配置 | [] |
| math | IMarkdownMath | 数学公式配置 | { splitSymbol: 'dollar' } |
| showCursor | boolean | 打字动画时是否显示光标 | false |
| cursor | React.ReactNode \| 'line' \| 'block' \| 'underline' \| 'circle' | 自定义光标元素或内置光标类型 | 'line' (当 showCursor 为 true 时) |
| onEnd | (data: EndData) => void | 打字结束回调 | - |
| onStart | (data: StartData) => void | 打字开始回调 | - |
| onBeforeTypedChar | (data: IBeforeTypedChar) => Promise | 字符打字前的回调,支持异步操作,会阻塞之后的打字 | - |
| onTypedChar | (data: ITypedChar) => void | 每字符打字后的回调 | - |
| disableTyping | boolean | 禁用打字动画效果 | false |
| autoStartTyping | boolean | 是否自动开始打字动画,设为 false 时需手动触发,不支持动态修改 | true |
| codeBlock | IMarkdownCode | 代码块配置 | {headerActions: true} |> 注意:打字进行中将
disableTyping 从 true 改为 false 只会从当前位置继续,不会回放已跳过的动画;若需从头播放,请调用实例方法 restart()`。详细文档可查看:完整文档
- react-markdown-typer - 如果你需要一个轻量级的 markdown 打字组件
- ds-markdown-mermaid-plugin - Mermaid 图表支持插件
MIT © onshinpei
欢迎贡献、提问和功能请求!
