typewriterFromSentences

COMPONENT

A function which you can use to register a data to Alpine.js to create Typewriter instances from within HTML.

Since 1.4.0

Signature

typewriterFromSentences( ): AlpineComponent

Parameters

config: AlpineTypewriterFromSentencesConfig

The initial configuration for the Typewriter

Returns

An Alpine.js data component

Examples

A. Three sentences

This example creates a typewriter that writes out three sentences.

First register typewriterFromSentences to alpine:

import Alpine from 'alpinejs';
import { typewriterFromSentences } from '@uiloos/alpine';

Alpine.data('typewriter', typewriterFromSentences);

Alpine.start();

Now you can use the typewriter in your HTML like this:

<span
   x-data="typewriter({
     sentences: [
       'Hello world',
       'Hello music',
       'Hello sunshine'
     ],
   })"
   x-text="typewriter().text"
 ></span>