Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • SensioLabs Professional services to help you with Symfony
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by SensioLabs
  1. Home
  2. Documentation
  3. Bundles
  4. Symfony UX Typed
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud

Table of Contents

  • Installation
  • Usage
    • Extend the JavaScript Controller
  • Backward Compatibility promise

Symfony UX Typed

Edit this page

Symfony UX Typed

Symfony UX Typed is a Symfony bundle integrating Typed in Symfony applications. It is part of the Symfony UX initiative.

Typed is a complete and easy to use animated typed texts. Just enter the strings you want to see typed, and it goes live without complexity.

Typed showing messages

Installation

Before you start, make sure you have Symfony UX configured in your app.

Then install the bundle using Composer and Symfony Flex:

1
2
3
4
5
6
7
8
9
$ composer require symfony/ux-typed

# Don't forget to install the JavaScript dependencies as well and compile
$ npm install --force
$ npm run watch

# or use yarn
$ yarn install --force
$ yarn watch

Also make sure you have at least version 3.2.1 of @symfony/stimulus-bridge in your package.json file.

Usage

Typed works using a list of strings and will manage typing them on your page. It comes with a lot of parameters to customize the way the strings are typed: speed, cursor, delays and smart backspace are some incredible parameters you can use.

The main usage of Symfony UX Typed is to use its Stimulus controller to initialize Typed:

1
2
3
4
5
6
<div>
    I created this UX component because
    <span {{ stimulus_controller('symfony/ux-typed', {
        strings: ['I ❤ Symfony UX', 'Symfony UX is great', 'Symfony UX is easy']
    }) }}></span>
</div>

That's it! Typed now shows the messages defined in the strings` argument. You can customize the way those messages are typed. Parameters are exactly the same as for the `typed library

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    I created this UX component because
    <span {{ stimulus_controller('symfony/ux-typed', {
        strings: ['I ❤ Symfony UX', 'Symfony UX is great', 'Symfony UX is easy'],
        smartBackspace: true,
        startDelay: 100,
        backSpeed: 20,
        backDelay: 100,
        loop: true,
        showCursor: true,
        cursorChar: '✨'
    }) }}></span>
</div>

Extend the JavaScript Controller

Symfony UX Typed allows you to extend its default behavior using a custom Stimulus controller:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// assets/controllers/mytyped_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    initialize() {
        this._onPreConnect = this._onPreConnect.bind(this);
        this._onConnect = this._onConnect.bind(this);
    }

    connect() {
        this.element.addEventListener('typed:pre-connect', this._onPreConnect);
        this.element.addEventListener('typed:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side-effects
        this.element.removeEventListener('typed:pre-connect', this._onConnect);
        this.element.removeEventListener('typed:connect', this._onPreConnect);
    }

    _onPreConnect(event) {
        // Typed has not been initialized - options can be changed
        console.log(event.detail.options); // Options that will be used to initialize Typed
        event.detail.options.onBegin = (typed) => {
            console.log("Typed is ready to type cool messages!");
        });
        event.detail.options.onStop = (typed) => {
            console.log("OK. Enough is enough.");
        });
    }

    _onConnect(event) {
        // Typed has just been intialized and you can access details from the event
        console.log(event.detail.typed); // Typed instance
        console.log(event.detail.options); // Options used to initialize Typed
    }
}

Then in your template, add your controller to the HTML attribute:

1
2
3
4
5
6
7
8
9
10
11
12
<html lang="en">
    <head>
        <title>Typed</title>
        {# ... #}
    </head>
    <body {{ stimulus_controller({
        mytyped: {},
        'symfony/ux-typed': {}
    }) }}>
        {# ... #}
    </body>
</html>

Note

Be careful to add your controller before the Typed controller so that it is executed before and can listen on the typed:connect event properly.

Backward Compatibility promise

This bundle aims at following the same Backward Compatibility promise as the Symfony framework: https://symfony.com/doc/current/contributing/code/bc.html

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.
TOC
    Version
    We stand with Ukraine.
    Version:

    Symfony UX is backed by

    Symfony Code Performance Profiling

    Symfony Code Performance Profiling

    Code consumes server resources. Blackfire tells you how

    Code consumes server resources. Blackfire tells you how

    Symfony footer

    ↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

    Avatar of nicofrand, a Symfony contributor

    Thanks nicofrand for being a Symfony contributor

    1 commit • 4 lines changed

    View all contributors that help us make Symfony

    Become a Symfony contributor

    Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

    Learn how to contribute

    Symfony™ is a trademark of Symfony SAS. All rights reserved.

    • What is Symfony?

      • Symfony at a Glance
      • Symfony Components
      • Case Studies
      • Symfony Releases
      • Security Policy
      • Logo & Screenshots
      • Trademark & Licenses
      • symfony1 Legacy
    • Learn Symfony

      • Symfony Docs
      • Symfony Book
      • Reference
      • Bundles
      • Best Practices
      • Training
      • eLearning Platform
      • Certification
    • Screencasts

      • Learn Symfony
      • Learn PHP
      • Learn JavaScript
      • Learn Drupal
      • Learn RESTful APIs
    • Community

      • SymfonyConnect
      • Support
      • How to be Involved
      • Code of Conduct
      • Events & Meetups
      • Projects using Symfony
      • Downloads Stats
      • Contributors
      • Backers
    • Blog

      • Events & Meetups
      • A week of symfony
      • Case studies
      • Cloud
      • Community
      • Conferences
      • Diversity
      • Documentation
      • Living on the edge
      • Releases
      • Security Advisories
      • SymfonyInsight
      • Twig
      • SensioLabs
    • Services

      • SensioLabs services
      • Train developers
      • Manage your project quality
      • Improve your project performance
      • Host Symfony projects

      Deployed on

    Follow Symfony