Have you tried React classnames?

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

Comments

[Ben Sinclair]

I see the use case for this, but personally I do it by creating a classname variable in the logic portion of my component rather than the jsx.

I think it's very unlikely I'd need to use more than one custom class name to a component.

[Chris Bongers]

Mainly comes in handy for me when using dynamic classnames (if x then y else z) kind of thing.

[majkl zumberi]

What are the differences between classnames and clsx?

[Chris Bongers]

I don't know clsx, probably the same kind of thing.
There are tons of these packages out there, all claim to be better/faster/more unique.

With this stuff to me it makes little to no difference if one is faster, as it will get compiled eventually.

[Q.Tran]

clsx is more better
npmtrends.com/classnames-vs-clsx

[Chris Bongers]

Not sure where it's better in this page?
Would you mind elaborating on that?

[Q.Tran]

Simple just compare package size

[Ganesh Prasad]

I wrote classd to resolve classnames using template literals. Also it's faster than classnames in most cases. npmjs.com/package/classd

[reidterror]

Hands down one of the most useful packages i've stumbled upon.

[Jake Riches]

I like the bind option, but I tend to use template literals to handle my class name logic for my projects. Provided you've got prettier configured right it shouldn't end up looking messy

[Chris Bongers]

For simple concats binding with template literals is my preferred way as well.
For conditional classes I prefer this as you can split it up more easily.

[Yuwang Cai]

Great tool! But I would rather compose these class names myself. No need to add some extra KBs to my app size 😄

[Roee Fl]

Been using classnames for the past 5 years every week, can't imagine developing without it. Good post!