KeydownEffect/ useKeydownEffect
Listens for keydown events with automatic cursor position tracking. Modifier keys (Shift, Ctrl, Alt, Meta) are skipped by default.
13px
250ms
Enter
Backspace
Space
import { useKeydownEffect } from '@onomatope/react'
function MyComponent() {
const ref = useKeydownEffect<HTMLTextAreaElement>({
texts: ['tap', 'clack'],
color: '#4a4a4a',
size: 13,
keyMap: {
Enter: { texts: ['ENTER!'] },
Backspace: { texts: ['DEL'], tone: 'rush' },
Space: { texts: ['SPC'], tone: 'static' },
},
})
return <textarea ref={ref} />
}Options
| Option | Type | Default | Description |
|---|---|---|---|
texts | string[] | ["POP!"] | Default text for all keys |
tone | Tone | "pop" | Default animation style |
color | string | "#666666" | Default text color |
size | number | tone default | Default font size in px |
keyMap | Record<string, Options | false> | undefined | Per-key overrides (key names follow KeyboardEvent.key) |
Notes
- •Supports both <input> and <textarea> with cursor position tracking
- •keyMap keys follow KeyboardEvent.key — e.g., "Enter", "Backspace", " "
- •Set a keyMap entry to false to suppress that key
- •Per-key options are merged with the base options