Svelte Typewriter

satohshi
1

Typewriter component for Svelte that actually "types" one character at a time

Svelte Typewriter

Typewriter component for Svelte that actually "types" one character at a time instead of just moving the caret at linear speed.

Installation

npm i svelte-typewrite // without an "r" at the end

Usage

<script>
    import { TypeWriter } from 'svelte-typewrite'
</script>

<TypeWriter texts={['lorem ipsum', 'dolor sit amet']} />

Props

Required

Name	Type	Description
`texts`	`string[]`	Array of strings to be displayed

Options

Name	Type	Default	Description
`repeat`	`number`	`0`	How many times `texts` should be looped over (`0` for indefinitely)
`endState`	`EndState`	`undefined`	What to do after typing the very last text *Required* if `repeat > 0`
`typeSpeed`	`number`	`60`	Speed at which the text is typed (in `ms/char`)
`deleteSpeed`	`number`	`40`	Speed at which the text is deleted (in `ms/char`)
`blinkDuration`	`number`	`600`	Duration of each "blink" of caret (in `ms`)
`blinkCount`	`number`	`3`	Number of blinks after the text is typed
`waitBetweenTexts`	`number`	`150`	How long to wait before starting to type the next text (in `ms`) Will be ignored if `blinksBetweenTexts > 0`
`blinksBetweenTexts`	`number`	`undefined`	How many times the caret should blink before starting to type the next text

interface EndState {
    /** Whether to leave the text typed or deleted */
    text: 'typed' | 'deleted'
    /** Whether to leave the caret visible, hidden, or blinking */
    caret: 'visible' | 'hidden' | 'blink'
}

Callbacks

Name	Type	Description
`ontypestart`	`(index: number) => void`	Runs when typing animation starts. Receives the index of the text being typed
`ontypeend`	`(index: number) => void`	Runs when typing animation ends. Receives the index of the text that was just typed
`ondeletestart`	`(index: number) => void`	Runs when deleting animation starts. Receives the index of the text being deleted
`ondeleteend`	`(index: number) => void`	Runs when deleting animation ends. Receives the index of the text that was just deleted

[!TIP] Type of index parameter will properly be "narrowed down" if texts is a tuple (i.e. defined with as const).
Useful if you have noUncheckedIndexedAccess set to true in your tsconfig.json.

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing