Classnames Library

If you’ve done much work in JavaScript, you’ve likely had to build up a string of CSS classes to apply to an element.

If you know all of the classes when you’re writing the code, you can just write them:

Known Classes Up Front

const knownClasses = "grid-block vertical shrink"

But what if you don’t know all of the classes up front because you have to merge in caller-supplied classes? With ES2015, you can use string interpolation:

String Interpolated Classes

const interpolatedClasses = `my-class ${callerClass}`

This works, unless the caller doesn’t supply a class. Suddenly, you’ve got elements with a class of undefined.

Or what if you have to conditionally include a class based on some condition? Things can get out of hand in a hurry.

Conditional Classes

let conditionalClasses = "btn"
if (isPressed()) classes += " btn-pressed"
else if (isHovered()) classes += " btn-over"

Enter Jed Watson’s classnames library.

classnames handles all of these cases:

Using classnames

import classNames from "classnames"
 
const knownClasses = classNames("grid-block", "vertical", "shrink")
 
const interpolatedClasses = classNames("my-class", callerClass)
 
const conditionalClasses = classNames("btn", {
  "btn-pressed": isPressed(),
  "btn-over": isHovered()
})

classnames takes a list of classes, arrays, or objects. It flattens the arrays and ignores any falsy classes. For objects, it treats each property of the object as a class and only includes the ones whose values are truthy.

This makes for a really clear specification of what classes will be used and eliminates the undefined class I mentioned above.

What about dynamic classes, such as when using CSS modules?

There is a bind version that you can use, but I prefer to use ES2015 computed property syntax instead:

Computed Classes

import styles from './styles'
 
const classes = classNames(styles.button, {
  [styles.pressed]: isPressed(),
  [styles.over]: isHovered()
})

All in all, classnames is a really useful part of my toolkit and has quickly become one of my favorite libraries.

Comments