Welcome to docs

Streaming Text

A component that displays text character by character with programmatic control over streaming state (idle, streaming, paused, completed).

Install the following dependencies:

bash

Props list

Prop	Type	Default	Example	Description
`text`	`string`	`-`	`Hello, world!`	The text to be streamed character by character.
`delay`	`number`	`10`	`50`	The delay in milliseconds between each character.
`indicator`	`ReactNode`	`-`	`<StreamingTextIndicator />`	Optional indicator to show while streaming (e.g., a blinking cursor). Only displayed when streaming is in progress.
`autoStart`	`boolean`	`false`	`true`	Whether to automatically start streaming on mount.
`onStateChange`	`(state: StreamingState) => void`	`-`	`(state) => console.log(state)`	Callback fired when streaming state changes. Use this to handle state transitions (idle → streaming → paused → completed).
`className`	`string`	`-`	`custom-class`	Additional CSS classes to apply to the component.

The component exposes control methods via a ref:

Method	Description
`start()`	Start or resume streaming. If already completed, resets to idle and starts streaming.
`pause()`	Pause streaming (can be resumed later with `start()`).
`reset()`	Reset streaming to the beginning (idle state).
`getState()`	Get the current streaming state. Returns one of: `"idle"`, `"streaming"`, `"paused"`, or `"completed"`.

tsx

The component manages four distinct states:

State	Description
`"idle"`	Initial state. Streaming has not started yet.
`"streaming"`	Actively streaming text character by character.
`"paused"`	Streaming is paused. Can be resumed with `start()`.
`"completed"`	All characters have been streamed. Can be reset with `reset()` or restarted with `start()`.

Use the StreamingTextIndicator component to show a visual indicator while streaming:

tsx