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

  npm install svelte-typewriter-store@latest -D

Usage/Examples

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

<script>
    import { typewriter } from "svelte-typewriter-store";
    //the list of words you want to cycle through
    const words = ["one", "two", "three"];
    //the typing speed
    const speed = 100;
    //how much you want to wait between words
    const wordWait = 1500;
    let wordStore = typewriter(words, speed, wordWait);
    //you can add a listener on the letter:add, letter:remove or on 
    //the completed word you can later remove them with store.off
    wordStore.on("letter:add", (addedLetter)=>{
        console.log(`Just added the letter ${addedLetter}`);
    });
    wordStore.on("letter:remove", (removedLetter)=>{
        console.log(`Just removed the letter ${removedLetter}`);
    });
    wordStore.on("word", (word)=>{
        console.log(`Just finished typing the word ${word}`);
    });
</script>

<button on:click={async ()=>{
    //you can add new words with 
    const [word] = await fetch("https://random-word-api.herokuapp.com/word")
        .then(res => res.json());
    wordStore.add(word)
}}>
    Add word
</button>

<button on:click={async ()=>{
    //you can remove a word
    wordStore.remove(0);
}}>
    Remove first word
</button>

<button on:click={async ()=>{
    //you can filter a word
    wordStore.filter((word)=> word.length > 5);
}}>
    Filter length > 5
</button>

<h1>
    <!-- Simply print the store to get the effect -->
    The current word is: {$wordStore}
</h1>