Conditionally Add CSS Classes in Your Stimulus Controllers

When you need to create a bit more advanced UI’s in your Rails application, Stimulus is a great, little framework to easily add sprinkles of JavaScript.

Whenever I have some functionality that is reused in multiple Stimulus controllers, I extract them into “helper” functions. I put these (related) functions in their own file in the app/javascript/controllers/helpers/ folder.

A common thing I do, similar to Rails views and components, is conditionally add CSS classes to an element.

For that I use a really simple JavaScript function:

// app/javascript/controllers/helpers/class_names.js

export function classNames(options) {
  return Object.keys(options).filter(key => options[key]).join(" ");
}

And then in your Stimulus controller:

import { Controller } from "@hotwired/stimulus";
import { classNames } from "helpers/class_names";

export default class extends Controller {
  // …

  get tooltipTemplate() {
    return `
      <span
        role="tooltip"
        class="${classNames({"tooltip": true, "tooltip--dark": this.isDarkTheme})}"
      />
    `;
  }
}

The tooltip-span will have the tooltip class by default, and the tooltip--dark only when this.isDarkTheme returns true. Getting started is very easy, much like using Rails’ class_names.