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.
Installation
Caution
Before you start, make sure you have StimulusBundle configured in your app.
Install the bundle using Composer and Symfony Flex:
1
$ composer require symfony/ux-typed
If you're using WebpackEncore, install your assets and restart Encore (not needed if you're using AssetMapper):
1 2 3 4 5 6
$ npm install --force
$ npm run watch
# or use yarn
$ yarn install --force
$ yarn watch
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:connect', this._onConnect);
this.element.removeEventListener('typed:pre-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
<html lang="en">
<head>
<title>Typed</title>
{# ... #}
</head>
<body {{ stimulus_controller('mytyped')|stimulus_controller('symfony/ux-typed', {
strings: ['...'],
}) }}>
{# ... #}
</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