•  • 

svelte-typed-js

A Svelte.js integration for Typed.js.

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 offical project here.

Demo: https://svelte.dev/repl/823ca24caab143a6896f22fb853a83d0?version=3

Table of contents

- Installation
- Usage

Installation

``
npm install --save svelte-typed-js
`

Usage

Minimal setup:

`javascript
import SvelteTypedJs from 'svelte-typed-js'
`

`html





`

The typing class also allows you to just animate certain parts of a string:
`html



Hey



``

Properties

You can make use of the following properties in order to customize your typing expirience:

| Property | Type | Description
|----------------------|---------|----------------------------------------------------------------------
| strings | Array | strings to be typed
| stringsElement | String | ID of element containing string children
| typeSpeed | Number | type speed in milliseconds
| startDelay | Number | time before typing starts in milliseconds
| backSpeed | Number | backspacing speed in milliseconds
| smartBackspace | Boolean | only backspace what doesn't match the previous string
| shuffle | Boolean | shuffle the strings
| backDelay | Number | time before backspacing in milliseconds
| fadeOut | Boolean | Fade out instead of backspace
| fadeOutClass | String | css class for fade animation
| fadeOutDelay | Number | fade out delay in milliseconds
| loop | Boolean | loop strings
| loopCount | Number | amount of loops
| showCursor | Boolean | show cursor
| cursorChar | String | character for cursor
| autoInsertCss | Boolean | insert CSS for cursor and fadeOut into HTML
| attr | String | attribute for typing Ex: input placeholder, value, or just HTML text
| bindInputFocusEvents | Boolean | bind to focus and blur if el is text input
| contentType | String | 'html' or 'null' for plaintext

License

MIT