https://github.com/melihaltintas/svelte-typed-js
https://github.com/melihaltintas/svelte-typed-js
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/melihaltintas/svelte-typed-js
- Owner: MelihAltintas
- Created: 2020-11-06T11:11:32.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-06T19:00:05.000Z (almost 5 years ago)
- Last Synced: 2025-06-30T02:06:20.599Z (3 months ago)
- Language: JavaScript
- Size: 32.2 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/svelte-typed-js) • [](https://github.com/MelihAltintas/svelte-typed-js/blob/master/LICENSE) • [](https://lgtm.com/projects/g/MelihAltintas/svelte-typed-js/context:javascript)
# 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](https://github.com/mattboldt/typed.js/).
**Demo**: https://svelte.dev/repl/823ca24caab143a6896f22fb853a83d0?version=3
## Table of contents
- [Installation](#installation)
- [Usage](#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](http://opensource.org/licenses/MIT)