Typewriter usage with Frameworks

1. In general

The Typewriter component works well with any framework which supports reactivity.

When using frameworks you will not need to subscribe to changes and observe the Typewriter manually. This allows you to use the Typewriter more declaratively. Using the Typewriter declaratively results in easier to understand code.

It is recommended that you use the Typewriter Composer for complex animations.

If you just want to cycle between sentences use a variant of typewriterFromSentences.

2. React

When using React you should use the @uiloos/react library. It contains the useTypewriter hook. The useTypewriter hook takes an instance of a Typewriter, and it will subscribe to changes of that Typewriter.

Use useTypewriter when you composed your animation using the Typewriter Composer.

Alternatively use the useTypewriterFromSentences hook when your animation cycles through sentences.

3. Vue

In Vue you should use the @uiloos/vue library. It contains a composable called useTypewriter. The useTypewriter hook takes an instance of a Typewriter, and it will subscribe to changes of that Typewriter.

Use useTypewriter when you composed your animation using the Typewriter Composer.

Alternatively use the useTypewriterFromSentences composable when your animation cycles through sentences.

4. Angular

If you are using Angular there is no need to include an extra library. As long as you use Typewriter inside of a @Component it will pick up on changes automatically.

5. Svelte

For Svelte you should use the @uiloos/svelte library. It contains the createTypewriterStore function which creates a readable Typewriter store, so you do not need to subscribe to it manually.

Use createTypewriterStore when you composed your animation using the Typewriter Composer.

Alternatively use the createTypewriterFromSentencesStore store creator when your animation cycles through sentences.

6. Alpine

With Alpine you should use the @uiloos/alpine package. It contains various functions to help make typewriter animations, which you use depends on the use case.

iI you composed your animation using the Typewriter Composer, it is recommended that you use the subscribe function. You can pass it an instance of Typewriter, and pass the result to Alpine.data.

This way the animation will be defined in JavaScript / TypeScript, for complex animations this will mean less clutter in your HTML.

Alternatively if you really want to create Typewriter's from HTML you can use typewriter which you can register with Alpine.data. This allows you to instantiate a Typewriter from within HTML.

Lastly use the typewriterFromSentences when your animation cycles through sentences. This allows you to create Typewriter's from within your HTML.