React Mechanical Keyboard ⌨️

A lightweight, zero-dependency React typewriter component with realistic typing animations.

Features

• Zero dependencies — no CSS-in-JS library required, works right out of the box
• Modern React 19+ — built with hooks and the react-jsx transform
• useTypewriter hook — extract the core engine for fully custom UIs
• Declarative actions — composable type(), pause(), deleteAll(), deleteChars() builders
• sentences prop — cycle through an array of strings with one prop
• Looping — infinite or N iterations via the loop prop
• Realistic typo simulation — set mistakeChance for QWERTY-aware "mistake → correct" animations
• Live speed changes — dynamically update typeSpeed / deleteSpeed mid-animation
• Callbacks — onType, onDelete, onFinish, onLoop
• Accessible — aria-hidden cursor, automatic prefers-reduced-motion support
• Tree-shakeable ESM — modern exports field with sideEffects: false
• Fully typed — comprehensive TypeScript definitions with JSDoc

Install

npm i react-mk

Quick Start

import Typewriter, { Cursor } from 'react-mk';

function App() {
  return (
    <p>
      <Typewriter>Hello World</Typewriter>
      <Cursor />
    </p>
  );
}

Usage

Simple Text

<Typewriter>Any string or number works here</Typewriter>

Action Sequences

Use the render-prop pattern to compose typing, pausing, and deleting:

<Typewriter>
  {({ type, pause, deleteAll }) => [
    type('Hello World'),
    pause(2000),
    deleteAll(),
    type('React MK v2'),
  ]}
</Typewriter>

Sentence Cycling

The sentences prop makes it trivial to cycle through an array of strings:

<Typewriter
  sentences={['First sentence', 'Second sentence', 'Third sentence']}
  sentenceDelay={2000}
  loop
/>

useTypewriter Hook

For full control, use the hook directly:

import { useTypewriter, type, pause, deleteAll, Cursor } from 'react-mk';

function CustomTypewriter() {
  const { text, phase } = useTypewriter(
    [type('Hello'), pause(1000), deleteAll(), type('World')],
    { loop: true, typeSpeed: [40, 80] },
  );

  return (
    <h1>
      {text}
      {phase !== 'complete' && <Cursor />}
    </h1>
  );
}

Realistic Typos

Add mistakeChance for humanized typing that makes QWERTY-adjacent mistakes and self-corrects:

<Typewriter mistakeChance={0.06} typeSpeed={[60, 120]}>
  This text will have occasional realistic typos that get corrected
</Typewriter>

Custom Cursors

<Cursor />                          {/* Default: blinking | */}
<Cursor blink={false}>_</Cursor>    {/* Static underscore */}
<Cursor blinkSpeed={300}>█</Cursor> {/* Fast-blinking block */}

API Reference

<Typewriter> Props

Prop	Type	Default	Description
children	string | number | ((builders) => Action[])	—	Content to type or render-prop returning actions
sentences	string[]	—	Array of sentences to cycle through (takes priority over children)
sentenceDelay	number	2000	Ms each sentence is shown before deletion
typeSpeed	[min, max]	[50, 90]	Delay range between keystrokes (ms)
deleteSpeed	[min, max]	[30, 60]	Delay range between deletions (ms)
loop	boolean | number	false	true for infinite, or a number for N iterations
loopDelay	number	1000	Ms before restarting the loop
startDelay	number	0	Ms before the animation begins
mistakeChance	number	0	Probability (0–1) of a typo per character
onType	(char, text) => void	—	Called after each character is typed
onDelete	(char, text) => void	—	Called after each character is deleted
onFinish	() => void	—	Called when all actions complete
onLoop	(count) => void	—	Called when the animation loops

useTypewriter(actions, options)

Returns { text, phase, loopCount }.

• text — The currently displayed string
• phase — One of 'idle' | 'typing' | 'deleting' | 'pausing' | 'complete'
• loopCount — Current loop iteration (0-indexed)

<Cursor> Props

Prop	Type	Default	Description
blink	boolean	true	Enable/disable blink animation
blinkSpeed	number	530	Blink cycle duration (ms)
children	ReactNode	|	Cursor character(s)
...rest	HTMLSpanElement props	—	Spread to the root <span>

Action Builders

Builder	Description
type(text)	Type a string character by character
pause(ms)	Pause for a duration in milliseconds
deleteAll()	Delete all currently displayed text
deleteChars(n)	Delete n characters from the end

Migration from v1

• Keyboard → Typewriter (default export renamed)
• @emotion/css removed — Cursor now uses pure CSS, no imports needed
• keyPressDelayRange → typeSpeed
• sentenceDelayPerCharRange → Use sentences + sentenceDelay props
• blinkAnimationDuration → blinkSpeed
• type() render-prop now returns explicit action objects instead of mixed arrays
• New: useTypewriter hook, deleteChars, loop, mistakeChance, callbacks