A Preact component that types.
Inspired by vue-typer.
Forked from reactyper.
; <Typer spool='🎉 PreacTyper' />
Installation
Node
$ npm i preactyper
or
$ yarn add preactyper
Then import:
;
Browser
<script src="https://unpkg.com/preactyper@0.7.1/dist/preactyper.min.js">
And access via window.Typer
Props
Each prop is listed in the format <prop>: <type> = <default-value>
. Note: The typer is considered complete when it has run once through the whole spool, then an additional number of repeats through the spool, and has erased the last string if eraseOnComplete
is true.
spool: string[] = ['React Typer']
- Array of strings to type
- Empty strings will be ignored, Unicode characters are supported
repeats: number = Infinity
- Number of additional times to the whole spool
shuffle: boolean = false
- Whether or not to shuffle the spool on every run
- Shuffles on first run
initialAction: 'typing' | 'erasing' = 'typing'
- Specifies initial action of the typer, whether to start typing or erasing
eraseOnComplete: boolean = false
- Whether or not to erase text on typer completion, see note above.
eraseStyle: 'backspace' | 'select' | 'select-all' | 'clear' = 'backspace'
- Style of erasing:
backspace
: Each character is removed and classed witherased
select
: Each character is selected and classed withselected
select-all
: All characters are selected and classed withselected
clear
: All characters are removed immediately and classed witherased
caretAnimationStyle: 'solid' | 'blink' | 'smooth' = 'blink'
- Style of the caret's animation:
solid
: Caret is just solidblink
: Caret blinkssmooth
: Caret smoothly moves between 0 and 100% opacity
preTypeDelay: number = 70
- Delay before the first type step in ms
- After this delay, the first character is typed immediately
typeDelay: number = 70
- Delay before every successive type step in ms
preEraseDelay: number = 2000
- Delay before the first erase step in ms
- After this delay, the first character is erased immediately
eraseDelay: number = 250
- Delay before every successive erase step in ms
Events
onType(typed: string)
- Called after a character is typed, called in conjunction with
onTyped
for the last character typed
: currently typed string
onTyped(current: string)
- Called after the whole word is typed
current
: string that finished typing
onErase(erased: string)
- Called after a character is erased, called in conjunction with
onErased
for last character erased
: currently erased string
onErased(current: string)
- Called after the whole word is erased
current
: string that finished erasing in full
onFinish()
- Called after the typer finishes, i.e. when it runs
(repeats + 1) * spool.length
times
Styles
The typer's styles are set to a relatively low specificity to allow overwriting them:
License
License MIT