Typewriter
Types a line, pauses, deletes it and moves to the next.
import { Typewriter } from '@joshicodes/cock';Cycling
reserve holds the width of the longest line so the text around it stays put.
Wake up to fresh eggs, a finished UI, a very loud bird, morning glory
All twelve hens accounted for. Nothing else to do.
Behaviour
- `reserve` holds the width of the longest string, so the text around it does not jump.
- Skips straight to the final state when the visitor has reduced motion turned on.
- Screen readers get the finished text, not the animation.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Typewriter
| Prop | Type | Default |
|---|---|---|
text required One string, or several to cycle through. | string | string[] | — |
speed Milliseconds per typed character. | number | 55 |
deleteSpeed Milliseconds per deleted character. | number | 28 |
pause How long a finished string stays before it is deleted. | number | 1800 |
delay Wait before the first character. | number | 0 |
loop Keep cycling. Defaults to true when there is more than one string. | boolean | — |
humanize Vary the rhythm a little instead of typing like a metronome. | boolean | true |
reserve Reserve the width of the longest string so surrounding text does not move. | boolean | false |
caret | boolean | true |
caretShape | 'bar' | 'block' | 'underline' | 'bar' |
hideCaretWhenDone Remove the caret once the last string is typed and nothing else will happen. | boolean | false |
class | string | — |
caretClass | string | — |
Events of Typewriter
| Event | Type | Default |
|---|---|---|
oncomplete | () => void | — |