{"id":13828426,"url":"https://github.com/beyondcode/laravel-tag-helper","last_synced_at":"2025-07-09T06:31:51.529Z","repository":{"id":62493721,"uuid":"151735125","full_name":"beyondcode/laravel-tag-helper","owner":"beyondcode","description":"Add powerful HTML tag helpers to your Laravel application","archived":true,"fork":false,"pushed_at":"2018-10-29T13:22:14.000Z","size":79,"stargazers_count":239,"open_issues_count":3,"forks_count":9,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-08-04T09:08:21.102Z","etag":null,"topics":["laravel","view"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyondcode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-05T14:43:22.000Z","updated_at":"2024-01-09T09:49:09.000Z","dependencies_parsed_at":"2022-11-02T11:31:14.788Z","dependency_job_id":null,"html_url":"https://github.com/beyondcode/laravel-tag-helper","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-tag-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-tag-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-tag-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-tag-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyondcode","download_url":"https://codeload.github.com/beyondcode/laravel-tag-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225492420,"owners_count":17482869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel","view"],"created_at":"2024-08-04T09:02:46.392Z","updated_at":"2024-11-20T08:30:32.459Z","avatar_url":"https://github.com/beyondcode.png","language":"PHP","funding_links":[],"categories":["PHP"],"sub_categories":[],"readme":"# Laravel Tag Helpers\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/beyondcode/laravel-tag-helper.svg?style=flat-square)](https://packagist.org/packages/beyondcode/laravel-tag-helper)\n[![Build Status](https://img.shields.io/travis/beyondcode/laravel-tag-helper/master.svg?style=flat-square)](https://travis-ci.org/beyondcode/laravel-tag-helper)\n[![Quality Score](https://img.shields.io/scrutinizer/g/beyondcode/laravel-tag-helper.svg?style=flat-square)](https://scrutinizer-ci.com/g/beyondcode/laravel-tag-helper)\n[![Total Downloads](https://img.shields.io/packagist/dt/beyondcode/laravel-tag-helper.svg?style=flat-square)](https://packagist.org/packages/beyondcode/laravel-tag-helper)\n\nThis package allows you to register custom \"tag helpers\" in your Laravel application. These helpers can modify the HTML code.\n\nFor example, instead of this:\n\n```html\n\u003cform method=\"post\"\u003e\n    \u003cinput type=\"hidden\" name=\"_method\" value=\"DELETE\"\u003e\n    \u003cinput type=\"hidden\" name=\"_token\" value=\"csrf-token\"\u003e    \n\u003c/form\u003e\n```\n\nYou can use custom tag helpers to turn this code into this:\n\n```html\n\u003cform csrf method=\"delete\"\u003e\n\n\u003c/form\u003e \n```\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require beyondcode/laravel-tag-helper\n```\n\nThe package will automatically register itself.\n\n## Usage\n\nYou can create your own Tag Helper, by creating a new class and extend from the `BeyondCode\\TagHelper\\Helper` class.\nWithin this class you can define on which HTML elements and attributes your helper should be triggered:\n\n```php\n\u003c?php\n\nnamespace BeyondCode\\TagHelper\\Helpers;\n\nuse BeyondCode\\TagHelper\\Helper;\nuse BeyondCode\\TagHelper\\Html\\HtmlElement;\n\nclass CustomTagHelper extends Helper\n{\n    protected $targetAttribute = 'custom';\n\n    protected $targetElement = 'div';\n\n    public function process(HtmlElement $element)\n    {\n        // Manipulate the DOM element\n    }\n}\n\n```\n\nTo use and apply this tag helper, you need to register it. Typically you would do this in the `AppServiceProvider boot()` method or a service provider of your own.\n\n```php\nTagHelper::helper(CustomTagHelper::class);\n```\n\nSince you only register the class name of the custom tag helper, you can use dependency injection inside of your custom helper class.\n\n### Binding your helper to HTML elements and attributes\n\nIn your custom tag helper, you can use the `$targetAttribute` and `$targetElement` properties to specify which HTML element (`div`, `form`, `a`, etc.) and which attributes (`\u003cdiv custom=\"value /\u003e`, `\u003cform method=\"post\"\u003e`, etc.) you want to bind this helper to.\n\nIf you do not provide a `targetElement` on your own, this package will use a `*` as a wildcard in order to target **all** elements with a specific attribute, like this:\n\n```php\nclass CustomTagHelper extends Helper\n{\n    protected $targetAttribute = 'my-attribute';\n    \n    // ...\n    \n}\n```\n\nThis tag helper would be called for every HTML element that has a `my-attribute` attribute.\n\n### Manipulating DOM Elements\n\nOnce your tag helper successfully matches one or multiple HTML elements, the `process` method of your tag helper will be called.\n\nInside of this method, you can manipulate the HTML element.\n\nAvailable features:\n\n#### Changing the HTML element tag\n\nIn this example, we are binding our helper to HTML elements `\u003cmy-custom-link href=\"/\"\u003e\u003c/my-custom-link\u003e`. In the process method, we can then change the tag internally to `a` to render this as a link.\n\n```php\n\u003c?php\n\nnamespace BeyondCode\\TagHelper\\Helpers;\n\nuse BeyondCode\\TagHelper\\Helper;\nuse BeyondCode\\TagHelper\\Html\\HtmlElement;\n\nclass CustomLink extends Helper\n{\n    protected $targetElement = 'my-custom-link';\n\n    public function process(HtmlElement $element)\n    {\n        $element-\u003esetTag('a');\n    }\n}\n```\n\n#### Manipulating Attributes\n\nYou can also add, edit or delete HTML element attributes.\n\nIn this example, we are binding our helper to all link tags that have a custom `route` attribute.\nWe then update the `href` attribute of our link, remove the `route` attribute and add a new `title` attribute. \n\n```php\n\u003c?php\n\nnamespace BeyondCode\\TagHelper\\Helpers;\n\nuse BeyondCode\\TagHelper\\Helper;\nuse BeyondCode\\TagHelper\\Html\\HtmlElement;\n\nclass CustomLink extends Helper\n{\n    protected $targetAttribute = 'route';\n    \n    protected $targetElement = 'a';\n\n    public function process(HtmlElement $element)\n    {\n        $element-\u003esetAttribute('href', route($element-\u003egetAttribute('route')));\n        \n        $element-\u003eremoveAttribute('route');\n        \n        $element-\u003esetAttribute('title', 'This is a link.');\n    }\n}\n```\n\n#### Manipulating Outer / Inner Text\n\nYour custom tag helpers can you manipulate the HTML that is inside or outside of the current element. \n\n```php\n\u003c?php\n\nnamespace BeyondCode\\TagHelper\\Helpers;\n\nuse BeyondCode\\TagHelper\\Helper;\nuse BeyondCode\\TagHelper\\Html\\HtmlElement;\n\nclass CustomLink extends Helper\n{\n    protected $targetAttribute = 'add-hidden-field';\n    \n    protected $targetElement = 'form';\n\n    public function process(HtmlElement $element)\n    {\n        $element-\u003eremoveAttribute('add-hidden-field');\n        \n        $element-\u003eappendInnerText('\u003cinput type=\"hidden\" name=\"hidden\" /\u003e');\n        \n        // $element-\u003eprependInnerText('');\n        // $element-\u003esetInnerText('');\n    }\n}\n```\n\n### Passing variables to your tag helpers\n\nYou can pass attribute values to your tag helpers  as you would usually pass attributes to HTML elements.\nSince the modifications of your tag helpers get cached, you should always return valid Blade template output in your modified attribute values.\n\nYou can **not** directly access the variable content inside of your tag helper, but only get the attribute string representation.\n\nFor example, to get the attribute value of the `method` attribute:\n\n```html\n\u003cform method=\"post\"\u003e\u003c/form\u003e\n```\n\nYou can access this data, using the `getAttribute` method inside your helper:\n\n```php\n\u003c?php\n\nnamespace BeyondCode\\TagHelper\\Helpers;\n\nuse BeyondCode\\TagHelper\\Helper;\nuse BeyondCode\\TagHelper\\Html\\HtmlElement;\n\nclass CustomForm extends Helper\n{\n    protected $targetElement = 'form';\n\n    public function process(HtmlElement $element)\n    {\n        $formMethod = $element-\u003egetAttribute('method');\n    }\n}\n```\n\nIf you want to write Blade output, you sometimes need to know if the user passed a variable or function call, or a string value.\nTo tell the difference, users can pass variable data by prefixing the attribute using a colon.\n\nIf you want to output this attribute into a blade template, you can then use the `getAttributeForBlade` method and it will \neither give you an escaped string representation of the attribute - or the unescaped representation, in case it got prefixed by a colon.\n\nFor example:\n\n```html\n\u003ca route=\"home\"\u003eHome\u003c/a\u003e\n```\n\n```php\n\u003c?php\n\nnamespace BeyondCode\\TagHelper\\Helpers;\n\nuse BeyondCode\\TagHelper\\Helper;\nuse BeyondCode\\TagHelper\\Html\\HtmlElement;\n\nclass CustomForm extends Helper\n{\n    protected $targetElement = 'a';\n\n    protected $targetAttribute = 'route';\n\n    public function process(HtmlElement $element)\n    {\n        $element-\u003esetAttribute('href', \"{{ route(\" . $element-\u003egetAttributeForBlade('route') . \") }}\");\n        \n        $element-\u003eremoveAttribute('route');\n    }\n}\n```\n\nThis will output:\n\n```html\n\u003ca href=\"{{ route('home') }}\"\u003eHome\u003c/a\u003e\n```\n\nBut if you pass a dynamic parameter like this:\n\n```html\n\u003ca :route=\"$routeVariable\"\u003eHome\u003c/a\u003e\n```\n\nThis will output:\n\n```html\n\u003ca href=\"{{ route($routeVariable) }}\"\u003eHome\u003c/a\u003e\n```\n\nThis way you do not need to manually care about escaping and detecting dynamic variables.\n\n## Built-In Helpers\n\nThis package ships with a couple useful tag helpers out of the box.\n\n### CSRF Helper\n\nJust add a `csrf` attribute to any `form` element to automatically add the Laravel CSRF field to it.\n\n```html\n\u003cform csrf method=\"post\"\u003e\n\n\u003c/form\u003e\n```\n\nWill become:\n\n\n```html\n\u003cform method=\"post\"\u003e\n    \u003cinput type=\"hidden\" name=\"_token\" value=\"csrf-token\"\u003e    \n\u003c/form\u003e\n```\n\n#### Caveats\n\n`csrf` needs to be in a line with another attribute.\n\n```php\n// this works\n\u003cform\n    csrf action=\"/posts\"\n    class=\"mt-8\u003e\n    \n// this doesn't work\n\u003cform\n    csrf\n    action=\"/posts\"\n    class=\"mt-8\u003e\n    \n```\n\n### Form Method Helper\n\nWhen your `form` contains a `method` other then `GET` or `POST`, the helper will automatically add a `_method` hidden field with the correct value to your form.\n\n```html\n\u003cform method=\"delete\"\u003e\n\n\u003c/form\u003e\n```\n\nWill become:\n\n\n```html\n\u003cform method=\"post\"\u003e\n    \u003cinput type=\"hidden\" name=\"_method\" value=\"DELETE\"\u003e    \n\u003c/form\u003e\n```\n\n### Link\n\nWhen your `a` tags contains a `route` attribute, this helper will change the href to the appropriate route.\nYou can also provide a `route-parameters` attribute, to pass additional parameters to the route generation.\n\nExamples:\n```html\n\u003ca route=\"home\"\u003eHome\u003c/a\u003e\n\n\u003ca route=\"profile\" :route-parameters=\"[$user-\u003eid()]\"\u003eHome\u003c/a\u003e\n\n```\n\n\n### Testing\n\n``` bash\ncomposer test\n```\n\n### Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n### Security\n\nIf you discover any security related issues, please email marcel@beyondco.de instead of using the issue tracker.\n\n## Credits\n\n- [Marcel Pociot](https://github.com/:author_username)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondcode%2Flaravel-tag-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyondcode%2Flaravel-tag-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondcode%2Flaravel-tag-helper/lists"}