README

A tiny HTML attribute generator written in PHP. Great for projects using tailwindcss and Alpine.js 🎡

Installation

composer require hirasso/attr

Usage

attr()

Define your attributes in an associative way:

<?php /** Example: render a button with custom classes and styles */  ?>
<button <?= attr([
            'type' => 'button',
            'class' => [
                'border border-current p-3' => true,
                'bg-white text-black' => !$isActive,
                'bg-blue-600 text-white' => $isActive
            ],
            'style' => [
                '--active-color' => 'red'
            ],
            'data-toggle' => true
        ]) ?>>
    Click Me!
</button>

...and the attr function transforms them into normal HTML:

<button type="button" class="border border-current p-3 bg-white text-black" style="--active-color: red;" data-toggle>
  Click Me!
</button>

jsonAttr()

Render JSON so that it is safe to be used inside an HTMLElement attribute:

<?php /** Example: render an x-data attribute for Alpine.js */  ?>
<div <?= attr([
  'x-data' => jsonAttr([
      'open' => true,
      "message" => "This 'quote' contains <b>bold text</b>"
  ])
]) ?>>
</div>

..the output will look like this and can be consumed by JavaScript:

<div x-data="{&quot;open&quot;:true,&quot;message&quot;:&quot;This &#039;quote&#039; contains &lt;b&gt;bold text&lt;\/b&gt;&quot;}"></div>

Tip

More examples can be seen by browsing the test files. Also, it's worth noting that both attr() as well as jsonAttr() escape all attributes for you. No need to do it yourself 🦦