# @loscrackitos/svelte-typed-js

> Typed.js Svelte component

Latest version **0.1.3** (published 2020-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @loscrackitos/svelte-typed-js
pnpm add @loscrackitos/svelte-typed-js
yarn add @loscrackitos/svelte-typed-js
bun add @loscrackitos/svelte-typed-js
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2020-09-11 |
| First published | 2020-09-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 110.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Jérôme Pogeant |
| Maintainers | jerome1337 |
| Keywords | svelte, components, typed.js |

## Links

- npm: https://www.npmjs.com/package/@loscrackitos/svelte-typed-js
- Repository: https://github.com/Los-Crackitos/svelte-typed-js
- Homepage: https://github.com/Los-Crackitos/svelte-typed-js#readme
- Issues: https://github.com/Los-Crackitos/svelte-typed-js/issues
- npm.io page: https://npm.io/package/@loscrackitos/svelte-typed-js

## Dependencies (1)

- [typed.js](https://npm.io/package/typed.js.md) ^2.0.11

## Recent versions

- 0.1.3 (latest) — 2020-09-11
- 0.1.2 — 2020-09-11
- 0.1.1 — 2020-09-11
- 0.1.0 — 2020-09-11

## README

# svelte-typed-js

[![npm](https://img.shields.io/npm/v/@loscrackitos/svelte-typed-js.svg)](https://www.npmjs.com/package/@loscrackitos/svelte-typed-js)
[![npm](https://img.shields.io/npm/dm/@loscrackitos/svelte-typed-js.svg)](https://www.npmjs.com/package/@loscrackitos/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](https://github.com/mattboldt/typed.js/).

## Table of contents

- [Installation](#installation)
- [Usage](#usage)
- [Example](#examples)

# Installation

```
npm i -D @loscrackitos/svelte-typed-js
```

## Default import

Import the component:

```javascript
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:

```html
<TypedJs strings="['Hello John', 'Hello Martin']">
  <h1 class="typing"></h1>
</TypedJs>
```

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

```html
<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](https://github.com/mattboldt/typed.js/).

# Examples

Here are several examples:

```html
<!-- 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>
```

---
_Source: https://npm.io/package/@loscrackitos/svelte-typed-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._