react-terminal-typewriter


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

Features

- 🎯 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

Installation

``bash
npm install react-terminal-typewriter
`

`bash
yarn add react-terminal-typewriter
`

`bash
pnpm add react-terminal-typewriter
`

Quick Start

`tsx
import { useTypewriter } from 'react-terminal-typewriter'

function App() {
const { displayText, cursorBlinkSpeed } = useTypewriter({
text: 'Hello, World!',
delay: 100,
loop: true
})

return (



{displayText}
className="cursor"
style={{
'--cursor-blink-speed': ${cursorBlinkSpeed}ms
} as React.CSSProperties}
/>


| 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}

`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' : ''}} />