React Typewriter
A flexible and scalable React component for animated typing effects.
|
Usage Variants
Code Typing Simulation
|
Default Configuration
|
Fast Typing & Erasing
|
Custom Cursor Character
>
Custom Cursor React Node
🖋️
Hide Cursor
One-Time Typing (No Loop)
|
Multi-line Text with Loop
|
Callbacks on Events
|
One character per line
|
Reverse typing
|
Live input typing
|
Current Time
|
Multilingual typing
|
Terminal-style animation
|
Pause & Resume Typing
|
Dynamic message switching
|
Performance & Behavior
The component resets gracefully when the lines prop changes, supports pausing, and cleanly loops based on the loop prop. Typing and erasing speeds are adjustable for smooth animations.
|
Styling and Accessibility
You can customise the style, className, and provide any React node as cursor. The component uses aria-live="polite" and aria-atomic="true" for accessibility.
▮