#Streaming Markdown in Taro

Pass the complete text received so far to text. Use streaming to control unfinished syntax repair, smooth output and trailing effects. Your request layer handles the transport and cancellation.

#Receive text

When a request returns individual chunks, append them before updating the component:

type TextListener = (text: string) => void;

async function readMarkdown(
  chunks: AsyncIterable<string>,
  onText: TextListener,
) {
  let text = '';

  for await (const chunk of chunks) {
    text += chunk;

    onText(text);
  }
}

Call readMarkdown(chunks, setText) from your request handler. Set the pending state to true when the request starts, then to false when it completes, fails or is cancelled. If your request library already returns accumulated text, pass it directly as in the quick start.

#Adjust the output

streaming={true} enables trailing repair, smooth output and the scale effect. Pass an object to configure each part:

import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
  pending: boolean;
};

export function Message({ text, pending }: MessageProps) {
  return (
    <Fluxdown
      streaming={
        pending && {
          repairEnding: true,
          smooth: true,
          effect: ['shad', { length: 3, maskWidth: 18 }],
        }
      }
      text={text}
    />
  );
}

Turn off smooth to keep the original chunk timing. See Core streaming for custom tickers and schedulers.

#Four trailing effects

For example, preserve incoming chunks and fade them in one at a time:

<Fluxdown
  streaming={pending && { smooth: false, effect: 'chunk' }}
  text={text}
/>

effect also accepts [name, options] or an array of effects. See Configuration for details and Animation for interactive examples.

#Finish or switch messages

Set streaming to false when generation ends. The component finishes any remaining smooth output before removing the trailing effect.

Give each message its own component and use a stable message identifier as its key. A different key creates fresh streaming state:

<Fluxdown key={message.id} streaming={message.pending} text={message.text} />