@loscrackitos/svelte-typed-js

0.1.3 • Public • Published

svelte-typed-js

npm npm

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>

Package Sidebar

Install

npm i @loscrackitos/svelte-typed-js

Weekly Downloads

5

Version

0.1.3

License

MIT

Unpacked Size

113 kB

Total Files

8

Last publish

Collaborators

  • thyrael
  • jerome1337