flowdown-react

React wrapper for @a5omic/flowdown.

@a5omic/flowdown-react keeps Flowdown's incremental parser path while still rendering the unfinished trailing line during React updates.

Install

npm install react react-dom @a5omic/flowdown @a5omic/flowdown-react

Component

import { StreamMarkdown } from '@a5omic/flowdown-react'

export function ChatMessage({ content }: { content: string }) {
  return <StreamMarkdown content={content} />
}

Hook

import { useEffect } from 'react'
import { useStreamMarkdown } from '@a5omic/flowdown-react'

export function LiveMessage({ chunks }: { chunks: string[] }) {
  const { ref, push, flush, end } = useStreamMarkdown()

  useEffect(() => {
    for (const chunk of chunks) {
      push(chunk)
      flush()
    }
    end()
  }, [chunks, push, flush, end])

  return <div ref={ref} />
}

API

StreamMarkdown

Props:

• content: string — Full markdown content received so far
• className?: string
• style?: CSSProperties
• highlight?: (code, lang) => string | Promise<string>
• onCodeBlock?: (code, lang) => void
• sanitize?: boolean
• virtualize?: boolean

useStreamMarkdown(options?)

Returns:

• ref — Attach to the container element
• push(chunk) — Append new markdown content
• flush() — Materialize the unfinished trailing line without ending the stream
• end() — Finalize the current stream
• reset() — Clear all output and parser state

License

MIT