Svelte-typewrite NPM

Svelte Typewriter

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

npm.io

Installation

npm i svelte-typewrite

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 textRequired 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.