Efficient Ways to Add Multiple Classnames in React

When building React applications, managing multiple classnames can enhance styling flexibility. Let's explore different ways to achieve this, including some popular packages, I will rate each approach based on ease of use and maintainability. Let's go!

1. Using Template Literals

A straightforward way to add multiple classnames is using ES6 template literals. This is effective for simple conditions.

import styles from './styles.module.css';

function MyComponent({ isActive }) {
  return (
    <div className={`${styles.container} ${isActive ? styles.active : ''}`}>
      Hello World!
    </div>
  );
}

Rating: 3/5

• Pros: Simple if you like vanilla.
• Cons: Can get lengthy and messy with complex conditions and many classnames.

2. Using Array.join(" ")

Another JavaScript method is using an array of classnames and joining them with a space. This can improve readability when dealing with several conditional classes.

import styles from './styles.module.css';

function MyComponent({ isActive, isDisabled }) {
  const classes = [
    styles.container,
    isActive && styles.active,
    isDisabled && styles.disabled,
  ].filter(Boolean).join(' ');

  return <div className={classes}>Hello World!</div>;
}

Rating: 4/5

• Pros: Clean and readable, no additional dependencies.
• Cons: Requires filtering out falsy values, which might not be intuitive at first glance.

3. Using the classnames / clsx Package

The classnames package makes handling multiple classnames easy, especially when dealing with conditional logic. clsx is a lightweight alternative to classnames with similar functionality.

First, choose one and install the package:

npm install classnames

npm install clsx

Then use it in your component:

// Import the one you installed
import classNames from 'classnames';
import clsx from 'clsx';
import styles from './styles.module.css';

function MyComponent({ isActive, isDisabled }) {
  return (
    <div>
      <div className={classNames(styles.container, {
        [styles.active]: isActive,
        [styles.disabled]: isDisabled,
      })}>
        Hello classnames
      </div>
      <div className={clsx(
        styles.container, 
        isActive && styles.active,
        isDisabled && styles.disabled
      )}>
        Hello clsx
      </div>
    </div>
  );
}

Rating: 5/5

• Pros: Highly readable, great for complex logic, and both accepts different types of inputs.
• Cons: Although not a main concern, these are still additional dependencies.

Conclusion

In React, managing multiple classnames can be done in several ways. For simple scenarios, template literals and arrays with join work well. However, for more complex scenarios, employing classnames or clsx can significantly improve your code's readability and maintainability. I hope this post helps you!