classnames-minimal

classnames-minimal

Simple utility function for conditionally joining class names together

This is inspired by JedWatson’s package classnames which I like but is a bit too bloated for my needs. I rarely need to support non-ES5 environments and I only need a subset of the API, so I created a more minimal version of it.

Install

$ npm install --save classnames-minimal

How to use

Pass it an object literal with class names as keys and a predicaty¹ value as value. Only the keys with a truthy value will be part of the generated string.

import classNames from 'classnames-minimal';

const classes = classNames({
  'block': true,
  'block--disabled': this.props.disabled,
  'block--highlighted': this.props.highlighted
});

console.log(classes); // => contains 'block block--highlighted' if this.props.highlighted == true and this.props.disabled == false

1: I think I just made that word up. Predicaty = a value that’s either truthy or falsy.

Bonus

If you’re using CSS modules or something similar and you have your class names in an object you can use ES2015’s computed property names really nicely like this…

import classNames from 'classnames-minimal';
import styles from './style.css';

const classes = classNames({
  [styles.root]: true,
  [styles.disabled]: this.props.disabled,
  [styles.highlighted]: this.props.highlighted
});

console.log(classes); // => contains the class names generated by CSS modules and filtered by our predicates

License

MIT © Jonathan Svenheden