typewriter<T>

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

Parameters

Returns

An Alpine.js data component

Examples

A. Simple typewriter example.

This example creates a typewriter that uses the output from the "Typewriter Composer" to create an animation:

First register typewriterFromSentences to alpine:

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

Alpine.data('typewriter', typewriter);

Alpine.start();

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

<span 
  x-data="typewriter({
    alpine: {
      name: 'foo'
    },
    actions: [
      {
        type: 'keyboard',
        text: 'a',
        delay: 1000,
        cursor: 0,
      },
      {
        type: 'keyboard',
        text: 'b',
        delay: 1000,
        cursor: 0,
      },
      {
        type: 'keyboard',
        text: 'c',
        delay: 1000,
        cursor: 0,
      },
    ],
  })" 
  x-text="foo().text">
</span>