Overview

Use the Component for simple, declarative effects. Use the Hook for full control.

Component (quickest)

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

<HumanLike text="Hello, world!" speed={80} config={{ mistakeFrequency: 0.03 }} />

Hook (full control)

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

const { displayText, isTyping, isActive, progress, start, pause, reset } = useHumanLike({
  text: 'Advanced control with hooks!',
  speed: 75,
  config: { mistakeFrequency: 0.03 }
})

Platform behavior

Traditional libraries delay characters; Human‑Like simulates actual key sequences by considering platform differences (mobile and desktop)

<HumanLike text="Mobile: @hello 123" keyboardMode="mobile" />
<HumanLike text="Desktop: @Hello 123" keyboardMode="desktop" />

Mobile Keyboard Simulation

Mobile keyboards have unique characteristics that Human-Like simulates:

• View Switching: Automatic transitions between letter, number, and symbol views
• Touch-Optimized Mistakes: Fat-finger errors based on touch screen layout
• CAPS LOCK Sequences: Realistic capital letter typing with modifier keys
• Symbol Access: Complex sequences for symbols like @, #, $

Desktop Keyboard Simulation

Desktop keyboards use different patterns:

• Modifier Keys: Shift, Ctrl, Alt sequences for special characters
• Physical Layout Mistakes: QWERTY-based adjacent key errors
• Direct Access: Faster sequences without view switching
• Symbol Combinations: Shift + number for symbols

Events

Attach callbacks only where you need them. The canonical list is here: Events.

<HumanLike
  text="Events"
  onStart={(id) => {}}
  onComplete={(id) => {}}
  onChar={(char, idx) => {}}
  onMistake={(m) => {}}
  onKey={(keyInfo) => {}}
/>

Configuration (fine‑tune)

See all options and defaults here: Configuration.

<HumanLike
  text="Config"
  config={{
    speed: 70,
    speedVariation: 30,
    mistakeFrequency: 0.03
  }}
/>

Pick your path