Streaming Text
Render text that arrives token by token with an animated blinking cursor.
StreamingText wraps a string that grows over time and appends a CSS-only blinking cursor while isStreaming is true. It is a server component with no local state.
States
streaming
Processing your request
done
Processing your request
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The current accumulated text |
isStreaming | boolean | false | Appends a blinking cursor to the end |
className | string | — | Additional class names on the span |
Usage
Drive text and isStreaming from your streaming state. The cursor disappears automatically when isStreaming becomes false.
'use client'
import { StreamingText } from '@clarxai/ui'
import { useState, useEffect } from 'react'
const CHUNKS = ['Hello', ', ', 'world', '!']
export function Example() {
const [text, setText] = useState('')
const [done, setDone] = useState(false)
useEffect(() => {
let i = 0
const id = setInterval(() => {
if (i < CHUNKS.length) {
setText((t) => t + CHUNKS[i++])
} else {
setDone(true)
clearInterval(id)
}
}, 200)
return () => clearInterval(id)
}, [])
return <StreamingText text={text} isStreaming={!done} />
}Source
packages/ui/src/streaming-text.tsx — copy into components/ui/streaming-text.tsx in your project.