How to Use CLSX to Conditionally Apply Classes in React

Use clsx() to build a className string from fixed names and conditions, then pass that string to a React element. This guide covers installation and the string, array, and object inputs used to compose classes.

What is CLSX?

clsx() is a function from the clsx package that combines supplied class values into a class-name string. In React, pass its result to the className prop. Conditions in its arguments determine which class names appear; React rendering is a separate concern.

For example, clsx('button', { 'button-primary': primary }) keeps the base class and includes button-primary when primary is truthy. This can make class selection easier to read than a long concatenation expression.

Setting Up CLSX in Your React Project

Install the package in your project with npm by running npm install clsx, or use Yarn with yarn add clsx. Then import the default export in the component that builds the class string:

import clsx from 'clsx';

Basic Usage of CLSX

Pass fixed class names as strings and conditional class names in an object. Each object key is included when its value is truthy:

const buttonClass = clsx('btn', { 'btn-primary': primary, 'btn-disabled': disabled });

A React button can use the result as className={buttonClass}. With primary true and disabled false, the class string contains btn btn-primary; with both conditions false, it contains only btn. Set the button’s actual disabled prop separately when it should be disabled; a CSS class only selects styling.

Here is the same happy-path selection in plain JavaScript to make the resulting string concrete. This small illustration does not import or execute the clsx package; the package call to use in a component is shown above.

const primary = true;
const disabled = false;
const buttonClass = [
  'btn',
  primary && 'btn-primary',
  disabled && 'btn-disabled',
].filter(Boolean).join(' ');
console.log(buttonClass);

Advanced Usage with Arrays and Nested Objects

clsx() also accepts arrays and objects, so class sources can be grouped and combined. For example, clsx('card', { 'card-featured': isFeatured, 'card-highlighted': isHighlighted }, ['additional-class', { 'extra-class': isFeatured }]) always includes card and additional-class. It includes card-featured and extra-class when isFeatured is truthy, and includes card-highlighted when isHighlighted is truthy. Pass the resulting string to a component with className={cardClass}.

Performance Considerations

The supplied information contains no performance measurements or supporting evidence about clsx(). It therefore does not establish whether the package is lightweight, efficient, optimized, or suitable for performance-sensitive applications, and it does not establish an effect on React re-renders. No performance verdict can be made from this information.

Conclusion

Use clsx() to combine static and conditional class values into a className string. Its string, array, and object inputs provide a readable way to organize class selection in React components.

FAQ

1. What is CLSX used for?
   clsx() combines supplied values into a class-name string that you can pass to a React element’s className prop.

2. How do I install CLSX in a React project?
   Run npm install clsx or yarn add clsx, then import it with import clsx from 'clsx';.

3. Can I use arrays and objects with CLSX?
   Yes. Strings, arrays, and objects can be combined; object keys are included according to their truthy values.

4. Is CLSX suitable for performance-sensitive applications?
   The supplied information includes no performance measurements or supporting evidence, so it does not support a verdict about performance suitability, size, efficiency, optimization, or React re-renders.

5. How does CLSX help with readability?
   It lets you group fixed and conditional class values in one expression, which can be easier to scan and maintain than complex string concatenation.