Dynamic Class Application in React Components

Introduction

In modern web development, particularly with libraries like React, it’s essential to dynamically apply CSS classes based on component state or props. This capability allows for a more interactive and responsive user interface by conditionally showing, hiding, or altering styles of elements.

This tutorial will guide you through different techniques to conditionally apply class attributes in React components using plain JavaScript, template literals, utility libraries like classnames, and an alternative library named clsx.

Prerequisites

Before diving into the details, ensure that you have a basic understanding of:

• React component lifecycle
• JSX syntax
• ES6 features including template literals
• Basic CSS knowledge

Conditionally Applying Class Attributes with Plain JavaScript

The most straightforward way to dynamically apply classes is by using conditional logic directly within your JSX. Let’s consider an example where we want to conditionally show a button group based on whether multiple items are selected:

class TopicNav extends React.Component {
  render() {
    const bulkActionClasses = `btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`;
    
    return (
      <div className="row">
        <div className="col-lg-6">
          <div className={bulkActionClasses}>
            <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              Bulk Actions <span className="caret"></span>
            </button>
            <ul className="dropdown-menu" role="menu">
              <li><a href="#">Merge into New Session</a></li>
              <li><a href="#">Add to Existing Session</a></li>
              <li className="divider"></li>
              <li><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

Here, we use a template literal inside the className attribute to include or exclude classes based on this.props.showBulkActions. This approach is simple and efficient for small conditional logic.

Using the classnames Utility

For more complex class manipulation scenarios, it’s advisable to use utility libraries like classnames. It provides a clean API to handle multiple conditions concisely:

import classNames from 'classnames';

class TopicNav extends React.Component {
  render() {
    const bulkActionClasses = classNames(
      'btn-group',
      'pull-right',
      { 'show': this.props.showBulkActions, 'hidden': !this.props.showBulkActions }
    );
    
    return (
      <div className="row">
        <div className="col-lg-6">
          <div className={bulkActionClasses}>
            <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              Bulk Actions <span className="caret"></span>
            </button>
            <ul className="dropdown-menu" role="menu">
              <li><a href="#">Merge into New Session</a></li>
              <li><a href="#">Add to Existing Session</a></li>
              <li className="divider"></li>
              <li><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

The classnames library allows you to pass a string for static classes and an object where keys are class names, and values are boolean expressions that determine if the class should be applied.

Introducing clsx for Performance Optimization

For scenarios demanding better performance, especially when dealing with numerous conditional classes, consider using clsx. It offers a similar API to classnames, but with smaller bundle size and optimized rendering:

import clsx from 'clsx';

class TopicNav extends React.Component {
  render() {
    const bulkActionClasses = clsx(
      'btn-group',
      'pull-right',
      { show: this.props.showBulkActions, hidden: !this.props.showBulkActions }
    );
    
    return (
      <div className="row">
        <div className="col-lg-6">
          <div className={bulkActionClasses}>
            <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              Bulk Actions <span className="caret"></span>
            </button>
            <ul className="dropdown-menu" role="menu">
              <li><a href="#">Merge into New Session</a></li>
              <li><a href="#">Add to Existing Session</a></li>
              <li className="divider"></li>
              <li><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

Template Literals for Inline Logic

If you’re using modern JavaScript features, template literals provide a powerful way to embed expressions within strings. This method is useful when you need concise inline logic:

class TopicNav extends React.Component {
  render() {
    return (
      <div className="row">
        <div className="col-lg-6">
          <div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}>
            <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              Bulk Actions <span className="caret"></span>
            </button>
            <ul className="dropdown-menu" role="menu">
              <li><a href="#">Merge into New Session</a></li>
              <li><a href="#">Add to Existing Session</a></li>
              <li className="divider"></li>
              <li><a href="#">Delete</a></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

This approach is particularly handy for straightforward conditions and when avoiding additional libraries.

Conclusion

Conditional class application in React enhances UI interactivity, making it crucial to master various methods. Whether using plain JavaScript, template literals, or utility libraries like classnames and clsx, each technique has its advantages depending on the complexity of your conditionals and performance needs. By understanding these tools, you’ll be well-equipped to manage dynamic styles effectively in your React projects.