Hook

Full programmatic control over typing.

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

const {
  displayText, isTyping, isActive, isPaused, isCompleted,
  progress, currentWPM,
  start, stop, pause, resume, reset, skip, rewind,
} = useHumanLike({ text: 'Hello', speed: 80 })

Options

Name	Type	Default	Description
`text`	`string`	required	Text to type
`speed`	`number`	`80`	Base speed (ms)
`keyboardMode`	`'mobile' \| 'desktop'`	`'mobile'`	Platform behavior
`autoStart`	`boolean`	`true`	Start on mount
`config`	`Partial\<HumanLikeConfig\>`	`{}`	Advanced behavior
Callbacks	see `/docs/usage/events`	-	onStart, onComplete, onChar, onMistake, onKey, ...

Returns

Name	Type	Description
`displayText`	`string`	Current output
`isTyping`	`boolean`	Actively typing or correcting
`isActive`	`boolean`	Any activity: typing, paused, correcting, thinking
`isPaused`	`boolean`	Paused state
`isCompleted`	`boolean`	Finished state
`currentState`	`'idle' \| 'typing' \| 'paused' \| 'correcting' \| 'thinking' \| 'completed'`	Internal state
`progress`	`number`	0–100
`currentWPM`	`number`	Words per minute
`mistakeCount`	`number`	Total mistakes
`totalDuration`	`number`	ms elapsed
`start, stop, pause, resume, reset, skip, rewind`	`() => void`	Controls
`showCursor, cursorChar, cursorBlinkSpeed`	mixed	Cursor state
`setCursorVisible, setCursorChar, setCursorBlinkSpeed`	functions	Cursor control

Patterns

Basic Controls

Control typing flow with start, pause, resume, and reset methods.

const { 
  displayText, 
  isTyping, 
  isActive,
  start, 
  pause, 
  resume, 
  reset 
} = useHumanLike({ 
  text: 'Click buttons to control typing!',
  autoStart: false 
})

return (
  <div>
    <p>{displayText}</p>
    <div>Status: {isActive ? 'Active' : 'Idle'}</div>
    <div>Typing: {isTyping ? 'Yes' : 'No'}</div>
    <button onClick={start} disabled={isTyping}>Start</button>
    <button onClick={pause} disabled={!isTyping}>Pause</button>
    <button onClick={resume}>Resume</button>
    <button onClick={reset}>Reset</button>
  </div>
)

Dynamic Configuration

Update typing behavior in real-time by changing options.

const [speed, setSpeed] = useState(80)
const [mistakes, setMistakes] = useState(0.03)

const { displayText, reset } = useHumanLike({ 
  text: 'Adjust speed and mistakes dynamically',
  config: { 
    speed, 
    speedVariation: 30,
    mistakeFrequency: mistakes
  }
})

// Reset to apply new settings
useEffect(() => {
  reset()
}, [speed, mistakes, reset])

Event Handling & Progress

Monitor typing progress and respond to events.

const [progress, setProgress] = useState(0)
const [mistakes, setMistakeCount] = useState(0)

const { displayText, currentWPM } = useHumanLike({
  text: 'Track progress and performance metrics',
  onProgress: setProgress,
  onMistake: () => setMistakeCount(prev => prev + 1),
  onComplete: () => console.log('Typing finished!')
})

return (
  <div>
    <p>{displayText}</p>
    <div>Progress: {progress.toFixed(1)}%</div>
    <div>Speed: {currentWPM} WPM</div>
    <div>Mistakes: {mistakes}</div>
  </div>
)

Platform-Specific Behavior

Different keyboard behaviors for mobile vs desktop.

const { displayText } = useHumanLike({
  text: 'Mobile: @hello 123 vs Desktop: @Hello 123',
  keyboardMode: 'mobile', // or 'desktop'
  onKey: (keyInfo) => {
    console.log('Key pressed:', keyInfo.key)
    console.log('Platform:', keyInfo.platform)
  }
})