基础用法

import DsMarkdown from 'ds-markdown';
 
function App() {
  return (
    <DsMarkdown interval={20}>
      # Hello ds-markdown
      
      这是一个简单的例子。
    </DsMarkdown>
  );
}

<DsMarkdown interval={10}>  // 快速打字
<DsMarkdown interval={50}>  // 慢速打字
<DsMarkdown interval={30}>  // 默认速度

<DsMarkdown 
  interval={{
    min: 10,
    max: 50,
    curve: 'ease-out'
  }}
>
  内容...
</DsMarkdown>

// 亮色主题（默认）
<DsMarkdown theme="light">
  内容...
</DsMarkdown>
 
// 暗色主题
<DsMarkdown theme="dark">
  内容...
</DsMarkdown>

<DsMarkdown disableTyping>
  这段内容会立即显示，不会有打字动画。
</DsMarkdown>

import { useRef } from 'react';
import DsMarkdown from 'ds-markdown';
 
function App() {
  const ref = useRef(null);
 
  return (
    <>
      <button onClick={() => ref.current?.start()}>开始</button>
      <button onClick={() => ref.current?.stop()}>暂停</button>
      <button onClick={() => ref.current?.resume()}>继续</button>
      <button onClick={() => ref.current?.restart()}>重启</button>
      
      <DsMarkdown 
        ref={ref}
        autoStartTyping={false}
        interval={20}
      >
        内容...
      </DsMarkdown>
    </>
  );
}

<DsMarkdown
  onStart={(data) => console.log('开始打字', data)}
  onEnd={(data) => console.log('打字完成', data)}
  onTypedChar={(data) => console.log('已打字', data)}
  onBeforeTypedChar={(data) => console.log('即将打字', data)}
>
  内容...
</DsMarkdown>