在开发 AI 聊天应用时,你是否遇到过这样的需求:
- 需要像 DeepSeek、ChatGPT 那样的流畅打字动画效果
- 后端流式推送数据,可能一次多个字,打字会有突然打多个字
- 非流式数据也要假装有流式的打字效果
- 需要同时支持 Markdown 渲染和数学公式显示
- 希望能区分"思考中"和"回答中"两种状态
- ...
ds-markdown 就是为了解决这些痛点而生的 React 组件!
- 📖 在线演示
- 🔧 StackBlitz 体验
✨ 核心特性
🤖 AI 对话场景完美适配
- 1:1 复刻 DeepSeek 聊天效果:完美还原主流 AI 聊天界面的视觉体验
- 双模式支持 :
thinking
(思考中)和answer
(回答中)两种显示模式 - 流式数据零延迟:无论后端一次推送多少字符,都能逐字流畅渲染
📊 完整的 Markdown 生态
- 完整语法支持:代码高亮、表格、列表等所有主流 Markdown 语法
- 数学公式渲染 :内置 KaTeX 支持,支持
$...$
和\[...\]
语法 - 主题切换:支持亮色/暗色主题,适配不同产品风格
- 插件化架构:兼容 remark/rehype 插件生态,轻松扩展功能
🔧 强大的开发体验
- 命令式 API :支持
stop
、resume
、start
、restart
等方法 - 丰富回调函数 :
onTypedChar
、onBeforeTypedChar
、onStart
、onEnd
- TypeScript 支持:完整的类型定义,开发体验丝滑
🎬 高性能动画引擎
- 双定时器模式 :支持
requestAnimationFrame
和setTimeout
两种模式 - 高频打字支持 :
requestAnimationFrame
模式下间隔可接近 0ms - 帧同步渲染:与浏览器刷新率完美配合,动画丝滑不卡顿
📦 快速安装
bash
npm install ds-markdown
# 或
yarn add ds-markdown
# 或
pnpm add ds-markdown
🚀 基础用法
1. 基础打字动画
tsx
import DsMarkdown from 'ds-markdown';
import 'ds-markdown/style.css';
function App() {
return (
<DsMarkdown interval={20} answerType="answer">
# Hello ds-markdown
这是一个**高性能**的打字动画组件!
## 特性
- ⚡ 零延迟流式处理
- 🎬 流畅打字动画
- 🎯 完美语法支持
</DsMarkdown>
);
}
2. 数学公式支持
tsx
import DsMarkdown from 'ds-markdown';
import { katexPlugin } from 'ds-markdown/plugins';
import 'ds-markdown/style.css';
import 'ds-markdown/katex.css';
function MathDemo() {
return (
<DsMarkdown
interval={20}
answerType="answer"
plugins={[katexPlugin]}
math={{ splitSymbol: 'dollar' }}
>
# 勾股定理
在直角三角形中,斜边的平方等于两条直角边的平方和:
$a^2 + b^2 = c^2$
</DsMarkdown>
);
}
3. AI 对话场景
tsx
function ChatDemo() {
const [thinking, setThinking] = useState('');
const [answer, setAnswer] = useState('');
const handleAsk = () => {
setThinking('🤔 正在思考您的问题...');
setTimeout(() => {
setAnswer(`# 关于 React 19
React 19 带来了许多激动人心的新特性:
## 🚀 主要更新
1. **React Compiler** - 自动优化性能
2. **Actions** - 简化表单处理
3. **Document Metadata** - 内置 SEO 支持`);
}, 2000);
};
return (
<div>
<button onClick={handleAsk}>询问 AI</button>
{thinking && (
<DsMarkdown answerType="thinking" interval={30}>
{thinking}
</DsMarkdown>
)}
{answer && (
<DsMarkdown answerType="answer" interval={15}>
{answer}
</DsMarkdown>
)}
</div>
);
}
🎯 高级用法
命令式 API
tsx
import { useRef } from 'react';
import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
function AdvancedDemo() {
const markdownRef = useRef<MarkdownCMDRef>(null);
const addContent = () => {
markdownRef.current?.push('新增的内容', 'answer');
};
const clearContent = () => {
markdownRef.current?.clear();
};
return (
<div>
<button onClick={addContent}>添加内容</button>
<button onClick={clearContent}>清空内容</button>
<button onClick={() => markdownRef.current?.stop()}>暂停</button>
<button onClick={() => markdownRef.current?.resume()}>继续</button>
<button onClick={() => markdownRef.current?.restart()}>重新开始</button>
<MarkdownCMD ref={markdownRef} interval={25} />
</div>
);
}
丰富的回调控制
tsx
function CallbackDemo() {
const handleTypedChar = (data) => {
console.log('打字进度:', data.percent + '%');
console.log('当前字符:', data.currentChar);
};
const handleBeforeTypedChar = async (data) => {
// 在字符显示前进行异步操作
if (data.currentChar === '!') {
await new Promise(resolve => setTimeout(resolve, 500));
}
};
return (
<DsMarkdown
interval={20}
onTypedChar={handleTypedChar}
onBeforeTypedChar={handleBeforeTypedChar}
onStart={() => console.log('开始打字')}
onEnd={() => console.log('打字完成')}
>
# 回调演示
这里会触发各种回调函数!
</DsMarkdown>
);
}
🔧 核心 API
基础属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
interval |
number |
30 |
打字间隔时间(ms) |
answerType |
`'thinking' | 'answer'` | 'answer' |
disableTyping |
boolean |
false |
是否禁用打字效果 |
timerType |
`'setTimeout' | 'requestAnimationFrame'` | 'setTimeout' |
autoStartTyping |
boolean |
true |
是否自动开始打字 |
主题配置
属性 | 类型 | 描述 |
---|---|---|
theme |
`'light' | 'dark'` |
plugins |
IMarkdownPlugin[] |
Markdown 插件 |
math |
`{ splitSymbol: 'bracket' | 'dollar' }` |
回调函数
回调 | 类型 | 描述 |
---|---|---|
onStart |
(data) => void |
开始打字时触发 |
onTypedChar |
(data) => void |
每个字符打字完成后触发 |
onBeforeTypedChar |
(data) => Promise<void> |
字符打字前触发(支持异步) |
onEnd |
(data) => void |
打字完成时触发 |
🌟 为什么选择 ds-markdown?
适用场景
- ✅ AI 聊天机器人/助手界面
- ✅ 实时问答/知识库系统
- ✅ 教育内容/数学公式展示
- ✅ 技术文档/API 说明
- ✅ 产品演示/交互式内容
- ✅ 任何需要"打字机"效果的 Markdown 内容
🔗 相关链接
- 📖 在线演示
- 🔧 StackBlitz 体验
- 📦 NPM 包
- 🐙 GitHub 仓库
- 📚 完整文档
🎉 总结
如果你正在开发 AI 聊天、知识问答或需要动态 Markdown 展示的应用,ds-markdown 是你的不二选择!
它不仅提供了流畅的打字动画效果,更针对 AI 聊天场景进行了深度优化,让你的应用拥有媲美 DeepSeek、ChatGPT 的专业体验。
立即开始体验吧! ⭐ 如果觉得有用,别忘了给项目点个 Star!