How to Use classnames Library in React for Conditional Styling

Use the classnames library in React by importing it and passing class names as strings, objects, or arrays to conditionally combine them. It helps you write cleaner code for dynamic class names by automatically joining them based on truthy values.

Syntax

The classnames function accepts multiple arguments of different types to combine CSS class names:

• Strings: Simple class names as strings.
• Objects: Keys are class names, values are booleans to include or exclude the class.
• Arrays: Lists of class names or objects.

The function returns a single string with all class names that are truthy.

javascript

import classNames from 'classnames';

const buttonClass = classNames(
  'btn',
  { 'btn-primary': isPrimary, 'btn-disabled': isDisabled },
  additionalClass
);

Example

This example shows a React button component that uses classnames to apply classes conditionally based on props.

javascript

import React from 'react';
import classNames from 'classnames';

function Button({ isPrimary, isDisabled, children }) {
  const buttonClass = classNames(
    'btn',
    { 'btn-primary': isPrimary, 'btn-disabled': isDisabled }
  );

  return (
    <button className={buttonClass} disabled={isDisabled}>
      {children}
    </button>
  );
}

export default function App() {
  return (
    <>
      <Button isPrimary={true} isDisabled={false}>Primary</Button>
      <Button isPrimary={false} isDisabled={true}>Disabled</Button>
      <Button isPrimary={false} isDisabled={false}>Default</Button>
    </>
  );
}

Output

<button class="btn btn-primary">Primary</button>
<button class="btn btn-disabled" disabled>Disabled</button>
<button class="btn">Default</button>

Common Pitfalls

Common mistakes when using classnames include:

• Passing undefined or null values directly instead of using objects or arrays, which can cause unexpected class names.
• Forgetting to import the library or misspelling the import.
• Using string concatenation instead of classnames, which makes code harder to read and maintain.

Always use objects or arrays for conditional classes to keep code clean.

javascript

/* Wrong way: string concatenation */
const buttonClassWrong = 'btn ' + (isPrimary ? 'btn-primary' : '') + (isDisabled ? ' btn-disabled' : '');

/* Right way: using classnames */
const buttonClassRight = classNames('btn', { 'btn-primary': isPrimary, 'btn-disabled': isDisabled });

Quick Reference

Use this quick guide to remember how to pass arguments to classnames:

Argument Type	Description	Example
String	Always included class name	'btn', 'active'
Object	Include class if value is true	{ 'btn-primary': isPrimary, 'disabled': isDisabled }
Array	List of strings or objects	['btn', { 'active': isActive }]

Key Takeaways

Import and use the classnames function to combine class names cleanly in React.

Pass strings, objects, or arrays to conditionally apply classes based on boolean values.

Avoid manual string concatenation for class names to keep code readable and maintainable.

Objects in classnames allow toggling classes easily with true/false values.

Always check that classnames is installed and imported correctly before use.