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
Prop | Type | Default | Description |
---|---|---|---|
text | string | required | Text to type |
speed | number | 80 | Base typing speed (ms) |
mistakeFrequency | number | 0.03 | Error probability (0–0.15) |
keyboardMode | 'mobile' | 'desktop' | 'mobile' | Platform behavior |
showCursor | boolean | true | Show cursor |
cursorChar | string | `" | "` |
cursorBlinkSpeed | number | 530 | Cursor blink ms |
autoStart | boolean | true | Start on mount |
id | string | - | Instance identifier |
className | string | - | CSS class |
style | React.CSSProperties | - | Inline styles |
config | Partial\<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!')}
/>