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 `
        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.

Published at . Have suggestions or improvements on this content? Do reach out. Interested in sharing Rails Designer with the Ruby on Rails community? Become an affiliate.

UI components for Ruby on Rails apps

$ 99 69 one-time

Get Access
  • One-time payment

  • Access to the entire library

  • Built for Ruby on Rails

  • Designed with Tailwind CSS and enhanced with Hotwire

  • Includes free updates (to any 1.x version)

  • Last update recently