Human-Like
Usage

Component

HumanLike component API

Use HumanLike for declarative typing. For imperative control, see Hook.

import { HumanLike } from '@ertekinno/human-like'

<HumanLike text="Hello" speed={80} />

Props

PropTypeDefaultDescription
textstringrequiredText to type
speednumber80Base typing speed (ms)
mistakeFrequencynumber0.03Error probability (0–0.15)
keyboardMode'mobile' | 'desktop''mobile'Platform behavior
showCursorbooleantrueShow cursor
cursorCharstring`""`
cursorBlinkSpeednumber530Cursor blink ms
autoStartbooleantrueStart on mount
idstring-Instance identifier
classNamestring-CSS class
styleReact.CSSProperties-Inline styles
configPartial\<HumanLikeConfig\>{}Advanced config

Prop Details

text

Name: text (string)
Default: required
Description: The text content to type out character by character.
Example:

<HumanLike text="Hello, world!" />

speed

Name: speed (number)
Default: 80
Description: Base typing speed in milliseconds per character. Lower values = faster typing.
Example:

<HumanLike text="Fast typing" speed={50} />

mistakeFrequency

Name: mistakeFrequency (number)
Default: 0.03
Description: Probability of making typing mistakes (0-0.15 range). Higher values = more errors.
Example:

<HumanLike text="Prone to errors" mistakeFrequency={0.08} />

keyboardMode

Name: keyboardMode ('mobile' | 'desktop')
Default: 'mobile'
Description: Platform behavior for key sequences. Mobile uses view switching, desktop uses modifiers.
Example:

<HumanLike text="@hello" keyboardMode="desktop" />

showCursor

Name: showCursor (boolean)
Default: true
Description: Whether to display the typing cursor.
Example:

<HumanLike text="No cursor" showCursor={false} />

cursorChar

Name: cursorChar (string)
Default: "|"
Description: Character to use as the typing cursor.
Example:

<HumanLike text="Custom cursor" cursorChar="█" />

autoStart

Name: autoStart (boolean)
Default: true
Description: Whether to start typing immediately on mount.
Example:

<HumanLike text="Manual start" autoStart={false} />

config

Name: config (Partial<HumanLikeConfig>)
Default: {}
Description: Advanced configuration object for fine-tuning behavior.
Example:

<HumanLike 
  text="Configured"
  config={{ 
    fatigueEffect: true,
    concentrationLapses: true
  }}
/>

Events

All event callbacks are optional. See /docs/usage/events for complete callback signatures.

<HumanLike 
  text="Interactive" 
  onStart={() => console.log('Started')}
  onComplete={() => console.log('Done')}
  onChar={(char, index) => console.log(`Typed: ${char}`)}
  onMistake={(mistake) => console.log('Oops!')}
/>