jerrylopez/classnames

A utility to construct HTML class name strings in PHP

v0.1.1 2024-02-24 04:50 UTC

Requires

• php: ^8.1.0

Requires (Dev)

• pestphp/pest: ^2.34

MIT

• Jerry Lopez

README

Classnames

A utility to construct HTML class name strings in PHP.

Installation

Install the package via Composer

composer require jerrylopez/classnames

Usage

Concatenating class names

Adding multiple sets of class name strings into the array will be concatenated in the output.

<?php

use function Jerrylopez\Classnames\{classnames}

?>

<div class="<?= classnames([
    'bg-blue md:px-6 md:py-6',
    'text-xl semibold',
]) ?>">
    ...
</div>


<!-- Output -->
<div class="bg-blue md:px-6 md:py-6 text-xl semibold">
    ...
</div>

Include class names based on condition

Adding an array with the class names as the key and a true returning condition as the value will include the class names in the output.

<?php

use function Jerrylopez\Classnames\{classnames}

?>

<div class="<?= classnames([
    'bg-blue md:px-6 md:py-6',
    'text-xl semibold',
    ['bg-green' => $this->someMethodThatReturnsTrue()]
]) ?>">
    ...
</div>

<!-- Output -->
<div class="bg-blue md:px-6 md:py-6 text-xl semibold bg-green">
    ...
</div>

Exclude class names based on condition

Adding an array with the class names as the key and a false returning condition as the value will exclude the class names from the output.

<?php

use function Jerrylopez\Classnames\{classnames}

?>

<div class="<?= classnames([
    'bg-blue md:px-6 md:py-6',
    'text-xl semibold',
    ['bg-green' => $this->someMethodThatReturnsFalse()]
]) ?>">
    ...
</div>

<!-- Output -->
<div class="bg-blue md:px-6 md:py-6 text-xl semibold">
    ...
</div>

Using the alias

This utility also comes with an alias cn that can be used as a shorthand for the classnames function.

<?php

use function Jerrylopez\Classnames\{cn}

?>

<div class="<?= cn([
    'bg-blue md:px-6 md:py-6',
    'text-xl semibold'
]) ?>">
    ...
</div>

<!-- Output -->
<div class="bg-blue md:px-6 md:py-6 text-xl semibold">
    ...
</div>

Credit

This package was inspired by the clsx package in JS community.