Usage
Events
Canonical callbacks reference
Attach only what you need. All callbacks receive an optional id when provided.
Callback signatures
onStart: (id?: string) => void
onComplete: (id?: string) => void
onChar: (char: string, index: number, id?: string) => void
onMistake: (mistake: MistakeInfo, id?: string) => void
onBackspace: (id?: string) => void
onPause: (id?: string) => void
onResume: (id?: string) => void
onKey: (keyInfo: KeyInfo, id?: string) => void
onStateChange: (event: { previousState: TypingState; currentState: TypingState; timestamp: number }, id?: string) => void
onKeyboardReset: (id?: string) => void
onError: (event: { code: string; message: string; timestamp: number }, id?: string) => voidTypes are listed in Types.
Quick Examples
Lifecycle Events
Track typing start and completion.
<HumanLike
text="Track typing lifecycle"
onStart={(id) => console.log('Typing started:', id)}
onComplete={(id) => console.log('Typing completed:', id)}
/>Character Tracking
Monitor each character as it's typed.
<HumanLike
text="Character by character tracking"
onChar={(char, index) => {
console.log(`Position ${index}: "${char}"`)
}}
/>Mistake Monitoring
Log typing errors and corrections.
<HumanLike
text="Monitor typing mistakes"
config={{ mistakeFrequency: 0.05 }}
onMistake={(mistake) => {
console.log(`Mistake type: ${mistake.type}`)
}}
/>Key Press Simulation
Track individual key presses in keyboard simulation.
<HumanLike
text="@Hello 123"
keyboardMode="mobile"
onKey={(keyInfo) => {
console.log(`Key pressed: ${keyInfo.key}`)
}}
/>Callback Details
onStart
Triggered when typing begins.
<HumanLike text="Hello" onStart={(id) => console.log('Started', id)} />onComplete
Triggered when typing finishes completely.
<HumanLike text="Done" onComplete={(id) => console.log('Finished', id)} />onChar
Triggered for each character typed (including corrections).
<HumanLike
text="Track chars"
onChar={(char, index, id) => {
console.log(`Character "${char}" at position ${index}`)
}}
/>onMistake
Triggered when a typing mistake occurs.
<HumanLike
text="Mistakes"
mistakeFrequency={0.1}
onMistake={(mistake, id) => {
console.log(`Mistake: ${mistake.type} - "${mistake.intended}" → "${mistake.typed}"`)
}}
/>onBackspace
Triggered during mistake correction.
<HumanLike
text="Corrections"
onBackspace={(id) => console.log('Backspacing')}
/>onPause
Triggered when typing is paused.
const { pause } = useHumanLike({
text: "Pausable",
onPause: (id) => console.log('Paused')
})onResume
Triggered when typing resumes after pause.
const { resume } = useHumanLike({
text: "Resumable",
onResume: (id) => console.log('Resumed')
})onKey
Triggered for each key press in the simulation.
<HumanLike
text="@hello"
onKey={(keyInfo, id) => {
console.log(`Key: ${keyInfo.key}, View: ${keyInfo.view}`)
}}
/>onStateChange
Triggered when typing state changes (idle → typing → paused → completed).
<HumanLike
text="States"
onStateChange={(event, id) => {
console.log(`${event.previousState} → ${event.currentState}`)
}}
/>onKeyboardReset
Triggered when keyboard state resets (e.g., caps lock off).
<HumanLike
text="Reset"
onKeyboardReset={(id) => console.log('Keyboard reset')}
/>onError
Triggered when an error occurs during typing.
<HumanLike
text="Error handling"
onError={(event, id) => {
console.log(`Error ${event.code}: ${event.message}`)
}}
/>Usage Patterns
Progress Tracking
Build progress indicators and completion handlers.
const [progress, setProgress] = useState(0)
const [isComplete, setIsComplete] = useState(false)
<HumanLike
text="Track typing progress with real-time updates"
onChar={(char, index) => {
const totalLength = "Track typing progress with real-time updates".length
setProgress(Math.round(((index + 1) / totalLength) * 100))
}}
onComplete={() => {
setProgress(100)
setIsComplete(true)
}}
/>
// Display: Progress: {progress}% {isComplete && '✅'}Keyboard Visual Synchronization
Highlight keys as they're pressed in keyboard components.
const [activeKey, setActiveKey] = useState<string | null>(null)
<HumanLike
text="@Hello World 123!"
keyboardMode="mobile"
onKey={(keyInfo) => {
setActiveKey(keyInfo.key)
// Highlight key in your keyboard component
highlightKey(keyInfo.key, keyInfo.view)
// Clear highlight after delay
setTimeout(() => setActiveKey(null), 200)
}}
onKeyboardReset={() => {
// Reset keyboard state (caps lock, etc.)
resetKeyboardHighlights()
}}
/>Analytics and Error Logging
Comprehensive logging for typing behavior analysis.
const [stats, setStats] = useState({
mistakes: 0,
wpm: 0,
accuracy: 100
})
<HumanLike
text="Comprehensive analytics and error tracking example"
config={{ mistakeFrequency: 0.03 }}
onStart={(id) => {
console.log('Session started:', id)
analytics.track('typing_started', { sessionId: id })
}}
onMistake={(mistake, id) => {
setStats(prev => ({ ...prev, mistakes: prev.mistakes + 1 }))
logMistake({
type: mistake.type,
intended: mistake.intended,
typed: mistake.typed,
sessionId: id
})
}}
onComplete={(id) => {
analytics.track('typing_completed', {
sessionId: id,
mistakes: stats.mistakes
})
}}
onError={(event, id) => {
console.error(`Typing error ${event.code}:`, event.message)
errorReporting.log(event, { sessionId: id })
}}
/>State Management Integration
Connect typing events to application state.
const { dispatch } = useTypingContext()
<HumanLike
text="Integration with application state management"
onStateChange={(event, id) => {
dispatch({
type: 'TYPING_STATE_CHANGED',
payload: {
previousState: event.previousState,
currentState: event.currentState,
timestamp: event.timestamp,
sessionId: id
}
})
}}
onPause={(id) => dispatch({ type: 'TYPING_PAUSED', payload: { sessionId: id } })}
onResume={(id) => dispatch({ type: 'TYPING_RESUMED', payload: { sessionId: id } })}
/>See: Types for complete event object structures