svelte-typed-js
Svelte Typed.js component
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
Checkout the official project here.
Table of contents
Installation
npm i -D @loscrackitos/svelte-typed-js
Default import
Import the component:
import TypedJs from '@loscrackitos/svelte-typed-js';
Usage
Import the TypedJs
component inside your Svelte template and set the sentences that needs to be typed inside the strings
props.
Simplest usage:
<TypedJs strings="['Hello John', 'Hello Martin']">
<h1 class="typing"></h1>
</TypedJs>
typing
class also allows you to just animate certain parts of a string:
<TypedJs strings="['John', 'Martin']">
<h1>👋 <span class="typing"></span></h1>
</TypedJs>
Props
Property | Type | Description | Usage |
---|---|---|---|
strings | Array | strings to be typed | strings="{['Text 1', 'Text 2']}" |
stringsElement | String | ID of element containing string children | stringsElement="myId" |
typeSpeed | Number | type speed in milliseconds | typeSpeed={50} |
startDelay | Number | time before typing starts in milliseconds | startDelay={1000} |
backSpeed | Number | backspacing speed in milliseconds | backSpeed={10} |
smartBackspace | Boolean | only backspace what doesn't match the previous string | smartBackspace={true} |
shuffle | Boolean | shuffle the strings | shuffle={true} |
backDelay | Number | time before backspacing in milliseconds | backDelay={100} |
fadeOut | Boolean | Fade out instead of backspace | fadeOut={true} |
fadeOutClass | String | css class for fade animation | fadeOutClass="fadeOutClass" |
fadeOutDelay | Number | fade out delay in milliseconds | fadeOutDelay={500} |
loop | Boolean | loop strings | loop={true} |
loopCount | Number | amount of loops | loopCount={3} |
showCursor | Boolean | show cursor | showCursor={true} |
cursorChar | String | character for cursor | cursorChar="_" |
autoInsertCss | Boolean | insert CSS for cursor and fadeOut into HTML | autoInsertCss={true} |
attr | String | attribute for typing Ex: input placeholder, value, or just HTML text | attr="placeholder" |
bindInputFocusEvents | Boolean | bind to focus and blur if el is text input | bindInputFocusEvents={true} |
contentType | String | 'html' or 'null' for plaintext | contentType="html" |
Events
Available events:
Event | Description | Usage |
---|---|---|
onComplete | All typing is complete | on:complete={handler} |
preStringTyped | Before each string is typed | on:preStringTyped={handler} |
onStringTyped | After each string is typed | on:stringTyped={handler} |
onLastStringBackspaced | During looping, after last string is typed | on:lastStringBackspaced={handler} |
onTypingPaused | Typing has been stopped | on:typingPaused={handler} |
onTypingResumed | Typing has been started after being stopped | on:typingResumed={handler} |
onReset | After reset | on:reset={handler} |
onStop | After stop | on:stop={handler} |
onStart | After start | on:start={handler} |
onDestroy | After destroy | on:destroy={handler} |
Features
Find every features documentation on the main library page.
Examples
Here are several examples:
<!-- infinite loop -->
<TypedJs
strings="{['awesome', 'brilliant']}"
loop="{true}"
on:complete="{handle}"
>
<p>We are a <span class="typing"></span> company!</p>
</TypedJs>
<!-- type with some pause -->
<TypedJs
strings="{['This is text ^1000 which gets paused for 1 second', 'wow, interesting']}"
>
<p class="typing"></p>
</TypedJs>
<!-- render html from strings -->
<TypedJs
strings="{['<p>Paragraph</p>', '<span>Span</span>']}"
contentType="html"
>
<p class="typing"></p>
</TypedJs>