StreamingText

Anima texto caractere a caractere com cursor piscante, simulando saída de streaming de LLM.

Demonstração

The quick brown fox jumps over the lazy dog.

Faster stream at 10ms per character.

Custom pipe cursor.

No cursor shown here.

Props

Prop	Tipo	Padrão	Descrição
`text`	`string`	`—`	A string de texto completa para animar.
`speed`	`number`	`30`	Milissegundos entre cada caractere.
`cursor`	`boolean`	`true`	Exibir cursor piscante durante o streaming.
`cursorChar`	`string`	`'▋'`	Caractere usado como cursor.
`onComplete`	`() => void`	`—`	Chamado quando a animação termina.

Uso

import { StreamingText } from '@ghiberti85/ui'

// Basic usage
<StreamingText text="Hello, world!" />

// Custom speed and cursor
<StreamingText text="Fast stream" speed={10} cursorChar="|" />

// No cursor
<StreamingText text="No cursor" cursor={false} />

// With completion callback
<StreamingText
  text="Done!"
  onComplete={() => console.log('finished')}
/>

// Simulated LLM streaming
const [text, setText] = useState('')
// Update text as chunks arrive from your API
<StreamingText text={text} speed={1} />

Ver no Storybook

Abrir no Storybook →

←ChatMessage HoverCard→