Regarding classes in React, we get a lot of power out of the box. However, we can enhance this power to make it even better.

We can leverage the classnames package, which has been in the React ecosystem since 2015.

Why React classnames rock

If all you do is write static classes like this:

<div className='static-class'></div>

This article might not be for you. Not to disrespect you, but in that case, keep doing what you are doing.

React classnames rock when it comes to dynamic classes or combined classes.

A combined class, for instance, if we allow the className to be passed from a parent component like this.

<div className={`existing-class ${className}`}>

Or even classes that render conditionally.

<div className={`existing-class ${success && 'bg-green'}`}>

Let's see how this would like with React classnames, but before we dive into that, we have to install it first.

npm install classnames

I tend to import it differently, so I never get confused with the default className by doing this.

import classnames from 'classnames';

And now we can use it like this.

<div className={classnames('foo', 'bar')}></div>

Or, in the more advanced examples, we can do stuff like this:

<div className={classNames('existing-class', className)}>

<div className={classNames('existing-class', 'bg-green': success)}>

And this is where it shines. It's a great way to abstract, difficult class conditions to be more readable.

For the result of your output code, it doesn't matter which way you go. It will be the same. However, this is way easier and more consistent across your code base from a maintainability point of view.

If you are an avid React user and use conditional classes, I would like you to try classnames.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter