svelte-typewriter-store

The simplest way to get a rotating typewriter effect in svelte.

Contributing

Contributions are always welcome!

For the moment there's no code of conduct neither a contributing guideline but if you found a problem or have an idea feel free to open an issue

If you want the fastest way to open a PR try out Codeflow

Authors

• @paoloricciuti

Installation

Install svelte-typewriter-store with npm

1  npm install svelte-typewriter-store@latest -D

Usage/Examples

Simply import the typewriter function from the package and create a readable store like this

1<script>
2	import { typewriter } from "svelte-typewriter-store";
3    //the list of words you want to cycle through
4	const words = ["one", "two", "three"];
5    //the typing speed
6	const speed = 100;
7    //how much you want to wait between words
8	const wordWait = 1500;
9	let wordStore = typewriter(words, speed, wordWait);
10    //you can add a listener on the letter:add, letter:remove or on 
11    //the completed word you can later remove them with store.off
12    wordStore.on("letter:add", (addedLetter)=>{
13        console.log(`Just added the letter ${addedLetter}`);
14    });
15    wordStore.on("letter:remove", (removedLetter)=>{
16        console.log(`Just removed the letter ${removedLetter}`);
17    });
18    wordStore.on("word", (word)=>{
19        console.log(`Just finished typing the word ${word}`);
20    });
21</script>
22
23<button on:click={async ()=>{
24    //you can add new words with 
25	const [word] = await fetch("https://random-word-api.herokuapp.com/word")
26		.then(res => res.json());
27	wordStore.add(word)
28}}>
29	Add word
30</button>
31
32<button on:click={async ()=>{
33    //you can remove a word
34	wordStore.remove(0);
35}}>
36	Remove first word
37</button>
38
39<button on:click={async ()=>{
40    //you can filter a word
41	wordStore.filter((word)=> word.length > 5);
42}}>
43	Filter length > 5
44</button>
45
46<h1>
47    <!-- Simply print the store to get the effect -->
48	The current word is: {$wordStore}
49</h1>