PHPackages                             hello-sebastian/hello-stimulus-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. hello-sebastian/hello-stimulus-bundle

ActiveSymfony-bundle

hello-sebastian/hello-stimulus-bundle
=====================================

Symfony Bundle with Stimulus.js Helper functions

v0.2.0(4y ago)0960MITPHPPHP >=7.1.3

Since Apr 15Pushed 4y ago1 watchersCompare

[ Source](https://github.com/HelloSebastian/hello-stimulus-bundle)[ Packagist](https://packagist.org/packages/hello-sebastian/hello-stimulus-bundle)[ RSS](/packages/hello-sebastian-hello-stimulus-bundle/feed)WikiDiscussions master Synced 5d ago

READMEChangelog (2)Dependencies (3)Versions (3)Used By (0)

HelloStimulusBundle
===================

[](#hellostimulusbundle)

**This Bundle provides Twig and Symfony form helper functions for [Stimulus.js](https://stimulus.hotwire.dev/).**

Overview
--------

[](#overview)

1. [Features](#features)
2. [Installation](#installation)
3. [Twig helper functions](#twig-helper-functions)
4. [Form helper functions](#form-helper-functions)

Features
--------

[](#features)

- Twig helper functions
- Symfony Forms helper functions

Installation
------------

[](#installation)

### Step 1: Download the Bundle

[](#step-1-download-the-bundle)

Open a command console, enter your project directory and execute the following command to download this bundle:

```
$ composer require hello-sebastian/hello-stimulus-bundle
```

### Step 2: Enable the Bundle (without flex)

[](#step-2-enable-the-bundle-without-flex)

Then, enable the bundle by adding it to the list of registered bundles in the `config/bundles.php` file of your project:

```
// config/bundles.php

return [
    // ...
    HelloSebastian\HelloStimulusBundle\HelloStimulusBundle::class => ['all' => true],
];
```

Twig helper functions
---------------------

[](#twig-helper-functions)

### hello\_stimulus\_controller(controllerName, values = \[\])

[](#hello_stimulus_controllercontrollername-values--)

Render value controller attribute. Optional with values.

#### Parameters

[](#parameters)

**controllerName**: name of the controller

**values**: array of stimulus values (optional)

#### Examples

[](#examples)

```

```

is rendered to

```

    {# rendered to data-controller="user--user-form" #}
    ```
- the "JavaScript" type

    ```

    {# rendered to data-controller="user--user-form" #}
    ```

Both variants give the same result.

### hello\_stimulus\_target(controllerName, target)

[](#hello_stimulus_targetcontrollername-target)

Render value target attribute.

#### Parameters

[](#parameters-1)

**controllerName**: name of controller for this target

**target**: name of the target attribute

#### Examples

[](#examples-1)

```

```

is rendered to

```

```

### hello\_stimulus\_action(controllerName, event, method)

[](#hello_stimulus_actioncontrollername-event-method)

Render action data attribute.

#### Parameters

[](#parameters-2)

**controllerName**: name of controller for this action

**event**: DOM event to listen for

**method**: name of the JavaScript method inside the controller class

#### Examples

[](#examples-2)

```

    Hey!

```

is rendered to

```

    Hey!

```

### hello\_stimulus\_value(controllerName, name, value)

[](#hello_stimulus_valuecontrollername-name-value)

Render value data attribute.

#### Parameters

[](#parameters-3)

**controllerName**: name of controller for this value

**name**: name of this value

**value**: value of this value

#### Examples

[](#examples-3)

```

```

is rendered to

```

```

Form helper functions
---------------------

[](#form-helper-functions)

In Symfony Forms it is helpful to pass attributes of stimulus directly to the types. For this purpose, this bundle provides a helper class with two methods (`target()` and `value()`).

[Full example of StimulusFormHelper](#example)

### StimulusFormHelper API

[](#stimulusformhelper-api)

#### \_\_construct(controllerName, defaultEvent = "click")

[](#__constructcontrollername-defaultevent--click)

##### Paramters

[](#paramters)

**controllerName**: name (and location) of the JavaScript controller class

**defaultEvent**: (optional): default DOM event to listen for (default is the "click" event)

##### Usage

[](#usage)

You can use two ways to specify the controller:

*Assuming the controller is located at `assets/controllers/user/user_form_controller.js`*

- the "HTML" stimulus type

    ```
    $this->formController = new StimulusFormHelper('user--user-form');
    // rendered to data-controller="user--user-form" to the form tag
    ```
- the "JavaScript" type

    ```
    $this->formController = new StimulusFormHelper('user/user_form');
    // rendered to data-controller="user--user-form" to the form tag
    ```

Both variants give the same result.

#### target(target)

[](#targettarget)

##### Parameters

[](#parameters-4)

**target**: name of target property inside stimulus controller

##### Returns

[](#returns)

```
array("data-[controllerName]-target" => "[target]");
```

##### Usage

[](#usage-1)

```
->add('firstName', TextType::class, array(
    'label' => 'First name',
    'attr' => $this->formController->target('firstNameInput')
))
```

#### action(method, event = null)

[](#actionmethod-event--null)

##### Parameters

[](#parameters-5)

**method**: name of JavaScript method inside stimulus controller

**event**: (optional) DOM event to listen for (if null, default event from constructor is taken)

##### Returns

[](#returns-1)

```
array("data-action" => "[event]->[controllerName]#[method]");
```

##### Usage

[](#usage-2)

```
->add('isActive', CheckboxType::class, array(
    'label' => 'is Active',
    'required' => false,
    'attr' => $this->formController->action("handleIsActive", "change")
))
```

### Example

[](#example)

```
//src/Form

namespace App\Form;

use App\Entity\User;
use HelloSebastian\HelloStimulusBundle\Form\StimulusFormHelper; //