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

npm install react-terminal-typewriter

yarn add react-terminal-typewriter

pnpm add react-terminal-typewriter

Quick Start

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

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

  return (
    <h1>
      {displayText}
      <span 
        className="cursor"
        style={{ 
          '--cursor-blink-speed': `${cursorBlinkSpeed}ms` 
        } as React.CSSProperties}
      />
    </h1>
  )
}

API Reference

Options

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

Return Values

| 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

Basic Usage

const { displayText } = useTypewriter({
  text: 'Hello, World!'
})

return <p>{displayText}</p>

With Loop

const { displayText, isDeleting } = useTypewriter({
  text: 'React Terminal Typewriter',
  loop: true,
  loopDelay: 3000,  // Wait 3s before deleting
  deleteDelay: 30   // Delete faster than typing
})

return (
  <h1>
    {displayText}
    <span className={`cursor ${isDeleting ? 'deleting' : ''}`} />
  </h1>
)

Custom Cursor Styling

const { displayText, cursorBlinkSpeed } = useTypewriter({
  text: 'Custom cursor style',
  cursorBlinkSpeed: 500  // Faster blink
})

return (
  <div>
    {displayText}
    <span 
      className="cursor"
      style={{ 
        '--cursor-blink-speed': `${cursorBlinkSpeed}ms` 
      } as React.CSSProperties}
    />
  </div>
)

Cursor CSS

Add this CSS for the blinking cursor effect:

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

Terminal Style Example

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

function Terminal() {
  const { displayText, cursorBlinkSpeed } = useTypewriter({
    text: 'npm install react-terminal-typewriter',
    delay: 50,
    startDelay: 1000
  })

  return (
    <div className="terminal">
      <span className="prompt">$ </span>
      <span className="command">{displayText}</span>
      <span 
        className="cursor"
        style={{ '--cursor-blink-speed': `${cursorBlinkSpeed}ms` } as React.CSSProperties}
      />
    </div>
  )
}

Browser Support

Works in all modern browsers that support ES2020:

• Chrome 80+
• Firefox 74+
• Safari 14+
• Edge 80+

Contributing

Contributions are welcome! Please read the contributing guidelines first.

License

MIT © Vitalii Petrenko