Why React classnames Is A Lifesaver And How You Could Use It If You Aren’t Already

Get it, a lifesaver?

Yes, I know. It’s 2020. React classnames has been out since 2015 and I’m writing about it only now?! Well, better late than never, right?

Throughout my React journey, I’ve crossed paths with classnames on multiple occasions. I would be on Google searching for something like “how to add multiple classes reactjs”, and it never failed to send me to a StackOverflow with answers related to classnames (aka the lifesaver Javascript utility when you need to add many classes and then some).

But I’ll tell you — I never once bothered to pick it up. For some reason, the interface always looked convoluted to me. I hated it. I mean, why couldn’t I just write something like:

<div className='container container-active' />

It would still work the same!

Or even something silly like the one below for when I’m importing my css/scss as a variable ‘styles’:

import styles from './styles.scss';
<div className={styles.container + ' ' + styles.containerActive} />

I mean, why not?!

If it works, why break it? Why go through the trouble of learning a completely new utility library, just for the sake of changing up how I add some extra spaces in my className?

Just look at how the classnames utility made something as simple as adding a space, to something 10 times more complex:

// I'm going to use 'classnames' instead of 'classNames' to prevent confusion between className and classNames, moving forward
import classnames as 'classnames';
<div className={classnames('container', 'container-active')} />

They do the exact same thing. But now with classnames, you’ll need to wrap extra stuff AND remember to import it?!

Who even has 20 seconds to install the classnames utility into their project AND remember to write the import statement?? Nah man, I’m going to use that 20 seconds to stare at some other problem and have the solution come to me when I’m not thinking about it.

Ok, jokes aside — classnames has seriously changed the game for me in terms of writing my classes, especially more so when I have conditionals or multiple classes.

Now, don’t get me wrong, I still do use the ‘basic’ way of writing className:

<div className={styles.container} /> 
or
<div className='container' />

But here’s where classnames really shone through:

Conditionals & Classnames — A Match Made In Heaven

In case you don’t know why anyone in their right mind would even require conditionals in their CSS, yeah, I didn’t either until I became that person. But here’s how you might need conditionals in your CSS.

Let’s say you have a box of height and width 50px and a border of 10px solid grey. (It is a compulsory/base style and we’ll call it ‘container’ in CSS)

You want to use this box in 3 different situations:

1. A normal box has the insides coloured grey (‘normal’)

2. An alert box has the insides coloured red (‘alert’)

3. A successful box has the insides coloured green (‘success’)

// The CSS is as follows:
.container {
   height: 50px;
   width: 50px;
   border: 10px solid grey;
}
.normal {
   background-color: grey;
}
.alert {
   background-color: red;
}
.success {
   background-color: green;
}

These boxes would only change colour depending on the instructions (by means of ‘props’) that you send to the box.

So let’s say I want to give the box instructions to show me a green coloured box, I send it a ‘prop’ of ‘success’:

// You call for the box and give it instructions of "success":
<Box success={true} />

In some convoluted fashion in the past, I would’ve done something like:

// The 'Box' will return:
<div className={`container 
    ${success ? 'success' : null}
    ${alert ? 'alert' : null}
    ${normal ? 'normal' : null}
`}>
   // Some box related content
</div>

Thankfully with classnames, I can simplify it to:

<div className={classnames('container', {
   'success': success, // if success={true}, 'success' is added
   'alert': alert,
   'normal': normal,
})} />

This simplifies it in such a way that, if success={true}, the div’s className is simplified into:

<div className='container success' />

Now isn’t that clean and simple?

Of course, let’s say the ‘container’ CSS is no longer required and is optional based on even more instructions, you can simply shift ‘container’ into the curly braces {} like:

<div className={classnames({
   'container': container,  
   'success': success, 
   'alert': alert,
   'normal': normal,
})} />

The only thing about classnames and its documents is that: there are so many ways to write a simple classnames.

So many freaking ways.

And each method might mean a world of difference in the way you write your CSS/SCSS.

But yeah. That’s it!

The crazy helpful world of classnames that took me way too long to appreciate its use.

I’ll still definitely turn to a ‘basic’ className writing if I don’t need too many classes (max 3 to be honest. Anything more and you might as well take a good hard look at your CSS), or don’t require conditionals.

But anything more complex, classnames is a lifesaver.

If you need some codes to refer to, here’s my codesandbox:

Have fun coding!