A lightweight React hook for terminal-style typewriter effects with cursor animation, loop support, and full TypeScript support
npm install react-terminal-typewriter


A lightweight React hook for terminal-style typewriter effects with cursor animation, loop support, and full TypeScript support.
- đ¯ Zero dependencies - only React as peer dependency
- đ TypeScript support - full type definitions included
- đ Loop mode - auto delete and retype text
- ⥠Configurable speeds - separate delays for typing, deleting, and pauses
- đąī¸ Cursor control - configurable cursor blink speed
- âī¸ React 18+ compatible - works with StrictMode
- đĒļ Lightweight - ~1KB minified
``bash`
npm install react-terminal-typewriter
`bash`
yarn add react-terminal-typewriter
`bash`
pnpm add react-terminal-typewriter
`tsx
import { useTypewriter } from 'react-terminal-typewriter'
function App() {
const { displayText, cursorBlinkSpeed } = useTypewriter({
text: 'Hello, World!',
delay: 100,
loop: true
})
return (
} as React.CSSProperties}
/>
API Reference
$3
| Option | Type | Default | Description |
|--------|------|---------|-------------|
|
text | string | required | Text to type |
| delay | number | 100 | Delay between typing each character (ms) |
| startDelay | number | 500 | Delay before starting to type (ms) |
| loop | boolean | false | Enable loop mode - text will be deleted and retyped |
| loopDelay | number | 2000 | Delay before starting to delete (ms) |
| deleteDelay | number | 50 | Delay between deleting each character (ms) |
| cursorBlinkSpeed | number | 800 | Cursor blink animation speed (ms) |$3
| Value | Type | Description |
|-------|------|-------------|
|
displayText | string | Current displayed text |
| isTyping | boolean | Whether currently typing |
| isDeleting | boolean | Whether currently deleting |
| isComplete | boolean | Whether typing is complete (only when loop is false) |
| cursorBlinkSpeed | number | Cursor blink speed for CSS variable |Examples
$3
`tsx
const { displayText } = useTypewriter({
text: 'Hello, World!'
})return
{displayText}
`$3
`tsx
const { displayText, isDeleting } = useTypewriter({
text: 'React Terminal Typewriter',
loop: true,
loopDelay: 3000, // Wait 3s before deleting
deleteDelay: 30 // Delete faster than typing
})return (
{displayText}
cursor ${isDeleting ? 'deleting' : ''}} />
)
`$3
`tsx
const { displayText, cursorBlinkSpeed } = useTypewriter({
text: 'Custom cursor style',
cursorBlinkSpeed: 500 // Faster blink
})return (
{displayText}
className="cursor"
style={{
'--cursor-blink-speed': ${cursorBlinkSpeed}ms
} as React.CSSProperties}
/>
)
`$3
Add this CSS for the blinking cursor effect:
`css
.cursor {
display: inline-block;
width: 3px;
height: 1em;
background-color: currentColor;
margin-left: 2px;
vertical-align: text-bottom;
animation: cursor-blink var(--cursor-blink-speed, 800ms) step-end infinite;
}@keyframes cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
`$3
`tsx
import { useTypewriter } from 'react-terminal-typewriter'function Terminal() {
const { displayText, cursorBlinkSpeed } = useTypewriter({
text: 'npm install react-terminal-typewriter',
delay: 50,
startDelay: 1000
})
return (
$
{displayText}
className="cursor"
style={{ '--cursor-blink-speed': ${cursorBlinkSpeed}ms } as React.CSSProperties}
/>
)
}
``Works in all modern browsers that support ES2020:
- Chrome 80+
- Firefox 74+
- Safari 14+
- Edge 80+
Contributions are welcome! Please read the contributing guidelines first.
MIT Š Vitalii Petrenko