# psk-typewriter

> Vue component to simulate typing text.

Latest version **0.2.2** (published 2021-06-18) · GPLv3 license · 0 weekly downloads

## Install

```sh
npm install psk-typewriter
pnpm add psk-typewriter
yarn add psk-typewriter
bun add psk-typewriter
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2021-06-18 |
| First published | 2021-02-11 |
| Weekly downloads | 0 |
| License | GPLv3 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 124.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Paulo Sergio Klaus |
| Maintainers | pauloklaus |
| Keywords | vue, vuejs, effect, text, typewriter |

## Links

- npm: https://www.npmjs.com/package/psk-typewriter
- Repository: https://github.com/pauloklaus/psk-typewriter
- Homepage: https://github.com/pauloklaus/psk-typewriter#readme
- Issues: https://github.com/pauloklaus/psk-typewriter/issues
- npm.io page: https://npm.io/package/psk-typewriter

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 0.2.2 (latest) — 2021-06-18
- 0.2.1 — 2021-05-27
- 0.2.0 — 2021-02-18
- 0.1.3 — 2021-02-11
- 0.1.2 — 2021-02-11
- 0.1.1 — 2021-02-11
- 0.1.0 — 2021-02-11

## README

# psk-typewriter

Vue component to simulate typing text.

* Report bugs: <https://github.com/pauloklaus/psk-typewriter/issues>
* Live test: <https://pauloklaus.com.br/playground>

## Install

Create a new vue project:

```shell
vue create
```

Install component:

```shell
npm install --save psk-typewriter
```

## Environment setting

Make a src/resources folder at the root:

```shell
mkdir src/resources
```

### Configure the psk-typewriter

Create the src/resources/psk-typewriter.js:

```javascript
import Vue from "vue";
import TypeWriter from "psk-typewriter";

Vue.use(TypeWriter, { TypeWriterName: "MyTypeWriter" });
```

### Import psk-typewriter

The "src/main.js" file should look like this:

```javascript
import Vue from "vue";
import App from "./App.vue";

import "./resources/psk-typewriter";

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount("#app");

```

## How to use (example in App.vue)

```vue
<template>
    <div>
        <my-type-writer text="And now?" @finished="playExplore = true" />
        <my-type-writer :text="explore" v-if="playExplore" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            playExplore: false,
            explore: "How about we explore the universe?"
        }
    }
}
</script>
```

## Properties

Property | Description | Required | Default
-|-|-|-
endChar | Character used at the end of the text while it is displayed. | no | _ (underline char)
text | Text to display | yes | :)
timeout | Time to display the next character | no | 15
autoscroll | Scroll the screen to the message | no | false

## Events

Event | Description
-|-
finished | When the message is all displayed

## Using in the browser

To use directly in the browser, import psk-typewriter:

```html
<script src="https://unpkg.com/psk-typewriter" />
```

---
_Source: https://npm.io/package/psk-typewriter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._