Streaming Data Example
Use the MarkdownCMD component to handle streaming data.
Live Demo
🌊 Streaming Data Demo
Simulates AI chat, code generation and other streaming data scenarios using MarkdownCMD component
Code Example
import { useRef, useEffect } from 'react';
import { MarkdownCMD } from 'ds-markdown';
function App() {
const ref = useRef(null);
useEffect(() => {
// Simulate streaming data
const chunks = [
'# Title\n\n',
'This is the first paragraph.\n\n',
'This is the second paragraph with **bold** and *italic* text.\n\n',
'## Subtitle\n\n',
'- List item 1\n',
'- List item 2\n',
'- List item 3\n',
];
let index = 0;
const timer = setInterval(() => {
if (index < chunks.length) {
ref.current?.push(chunks[index]);
index++;
} else {
clearInterval(timer);
}
}, 500);
return () => clearInterval(timer);
}, []);
return (
<MarkdownCMD
ref={ref}
interval={20}
showCursor
cursor="block"
/>
);
}Description
- Use
push()method to dynamically add content - Support streaming data processing
- Can display typing animation in real-time