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.