Alpine CSP boolean components

Managing boolean states for UI elements like modals, accordions, or tooltips is common in Alpine. While straightforward in regular Alpine, Alpine CSP often requires more boilerplate. To simplify this, Hyvä provides the hyva.createBooleanObject utility method.

hyva.createBooleanObject(name, value = false, additionalMethods = {})

This utility creates an object with methods to manage a boolean state. It accepts up to three arguments:

name: The property name (e.g., "hidden", "open", "active").
value: The initial boolean state (true or false). Defaults to false.
additionalMethods: (Optional) An object of custom methods to merge into the returned boolean object.

Creating a boolean object

The created boolean object provides accessor methods based on the name property. For a property named hidden, you'll get hidden() to check the state and notHidden() for its inverse.

<script>
  Alpine.data('example', () => hyva.createBooleanObject('hidden', true))
</script>
<div x-data="example">
    <template x-if="hidden">
        <div>Show if hidden</div>
    </template>
    <template x-if="notHidden">
        <div>Show if visible</div>
    </template>
    <input type="checkbox" :checked="!hidden" @change="toggleHidden" />
*  </div>

Important: Use notName for Cross-Compatibility

To ensure compatibility across both Alpine CSP and non-CSP environments, always use the generated notName accessor (e.g., notHidden) instead of !name (e.g., !hidden). Alpine CSP evaluates expressions differently, and !name is deprecated and will not work in non-CSP versions.

Changing a boolean state

The object also includes three mutator methods to change the boolean state (replace "Name" with your property name):

toggleName: Flips the current state.
setNameTrue: Sets the state to true.
setNameFalse: Sets the state to false.

CamelCasing values

If the name property contains underscores, the generated accessor and mutator methods will use CamelCase. For example, hyva.createBooleanObject('is_hidden') will generate:

is_hidden
notIsHidden
toggleIsHidden,
setIsHiddenTrue, and
setIsHiddenFalse

Examples

Example `hidden` component

This example initializes a hidden property to true.

hyva.createBooleanObject('hidden', true)
// results in 
{
    hidden(): true,
    notHidden(): false,
    toggleHidden(),
    setHiddenTrue(),
    setHiddenFalse()
}

Example `visible` component

This example initializes a visible property to its default false.

hyva.createBooleanObject('visible')
// results in
{
    visible(): false,
    notVisible(): true,
    toggleVisible(),
    setVisibleTrue(),
    setVisibleFalse()
}

Example `text` or `password` switcher

Extend the boolean object with custom methods using the additionalMethods argument. Here, textOrPassword dynamically sets an input's type.

hyva.createBooleanObject('showPassword', false, {textOrPassword() {return !this.showPassword() ? 'text' : 'password'}})

The custom method could be used on an input field: <input type="password" :type="textOrPassword">

Example class bindings

Use additionalMethods to define dynamic class bindings based on the boolean state.

hyva.createBooleanObject('hidden', false, {cardClasses() {return {'hidden': this.hidden()}}})

It could be used like this: <div :class="cardClasses">

Example computing text of an element

Another common use for additionalMethods is to compute dynamic text, such as button labels, based on the component's state.

hyva.createBooleanObject('password', false, {
    innerText() {
        return !this.password() 
          ? '<?= __('Show password') ?>'
          : '<?= __('Hide password') ?>'
        }
})

This could be used as the label on a button: <button type="button" x-text="innerText">

On this page

Navigation