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',
                '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>

Tailwind CSS IntelliSense

To get Tailwind CSS IntelliSense in VS Code working with attr(), add the following to your user settings or .vscode/settings.json:

{
  "tailwindCSS.includeLanguages": {
    "php": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    "/\\*tw\\*/\\s*'([^']*)'", // /*tw*/ hint, single-quoted
    "/\\*tw\\*/\\s*\"([^\"]*)\"", // /*tw*/ hint, double-quoted
    "->class\\(\\s*'([^']*)'", // fluent API, single-quoted
    "->class\\(\\s*\"([^\"]*)\"", // fluent API, double-quoted
    "'class'\\s*=>\\s*'([^']*)'", // plain string, single-quoted
    "'class'\\s*=>\\s*\"([^\"]*)\"", // plain string, double-quoted
    ["'class'\\s*=>\\s*\\[((?:[^\\[\\]]|\\[[^\\]]*\\])*)\\]", "'([^']*)'"], // conditional array, single-quoted
    ["'class'\\s*=>\\s*\\[((?:[^\\[\\]]|\\[[^\\]]*\\])*)\\]", "\"([^\"]*)\""], // conditional array, double-quoted
  ],
}

This enables completions for all supported class syntaxes:

// Fluent API
->class('block p-3')
->class('bg-blue-600 text-white', $isActive)

// Array class syntax (plain string)
'class' => 'block p-3'

// Array class syntax (conditional)
'class' => [
    'block p-3',
    'bg-blue-600 text-white' => $isActive,
]

// Anywhere else, use the /*tw*/ hint comment
$class = /*tw*/ 'text-white bg-blue-600';

Fluent API

For more expressive attribute building, use the fluent interface:

<button <?= attr()
    ->set('type', 'button')
    ->set('disabled', $isDisabled)
    ->class('border p-3')
    ->class('bg-blue-600 text-white', $isActive)
    ->class('bg-white text-black', !$isActive)
    ->style('--highlight', 'red')
    ->style('display', 'none', $isHidden)
    ->aria('expanded', 'false') ?>>
    Click Me!
</button>

Available Methods

Method	Description
`set($name, $value)`	Set any attribute. `null` and `false` values are ignored.
`class($class, $when)`	Add class(es). Supports space-separated classes. Optional condition.
`style($property, $value)`	Add inline style. `null` and `false` values are ignored.
`aria($name, $value, $when)`	Shortcut for aria attributes.
`merge($attributes)`	Merge an array of attributes (interop with existing code).

The builder implements Stringable, so you can echo it directly or call ->toString().

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 🦦

hirasso / attr

Maintainers

Package info

Fund package maintenance!

Statistics

Security