react-markdown-stream

Streaming-first React Markdown renderer.

专为 AI 聊天设计的 Markdown 渲染器，支持流式输出、语法高亮、LaTeX 数学公式。

Features

• Streaming - 真正的流式渲染，边接收边显示
• Syntax Highlighting - 内置代码块语法高亮
• KaTeX Math - 支持 LaTeX 数学公式渲染
• Theme Ready - CSS 变量主题系统，支持 dark/light 模式
• Tailwind Ready - 天然适配 Tailwind CSS
• TypeScript - 完整的 TypeScript 类型支持

Install

npm install react-markdown-stream

Quick Start

import { MarkdownRenderer } from 'react-markdown-stream';
import 'react-markdown-stream/styles';

<MarkdownRenderer
  content="# Hello\n\nThis is **markdown** with streaming support."
  done={true}
/>

Streaming

import { MarkdownRenderer, useSSEStream } from 'react-markdown-stream';

function Chat() {
  const { content, isStreaming, start } = useSSEStream({
    url: '/api/chat',
    body: { message: '你好' },
  });

  return (
    <MarkdownRenderer content={content} done={!isStreaming} />
  );
}

API

MarkdownRenderer

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | - | Markdown 内容 | | done | boolean | true | 是否完成（控制光标） | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | 主题 | | syntaxHighlight | boolean | true | 语法高亮 | | math | boolean | true | KaTeX 数学 |

useSSEStream

const { content, isStreaming, start, stop } = useSSEStream({
  url: string,
  body?: object,
  onComplete?: (text) => void,
});

License

MIT