DEV Community

Cover image for Have you tried React classnames?

Have you tried React classnames?

Chris Bongers on October 26, 2022

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 c...
Collapse
 
moopet profile image
Ben Sinclair • Edited

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
majklzumberi profile image
majkl zumberi

What are the differences between classnames and clsx?

Collapse
 
dailydevtips1 profile image
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.

Collapse
 
tranlehaiquan profile image
Q.Tran

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
tranlehaiquan profile image
Q.Tran

Simple just compare package size

Collapse
 
gnsp profile image
Ganesh Prasad • Edited

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

Collapse
 
reidterror profile image
reidterror

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

Collapse
 
jakerich1 profile image
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

Collapse
 
dailydevtips1 profile image
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.

Collapse
 
mrcaidev profile image
Yuwang Cai

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

Collapse
 
dopamine0 profile image
Roee Fl

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