Classnames-TS

Simple utility for conditionally joining classNames together

---

This previously resided inside React as a utility, but is now pulled out and library-agnostic.

Please note this is a rewritten version of classname library.

The problem

So let's say you want to conditionally join class names together, a common scenario should be something like:

var toggleClassName = 'toggle';
if (isLoading) {
  toggleClassName += ' toggle--loading';
}
if (isSelected) {
  className += ' toggle--active';
}

The solution

Assigning class name strings can be hard to read and error-prone. This utility solves this problem:

var toggleClassName = className({
  'toggle': true,
  'toggle--loading': isLoading,
  'toggle--active': isSelected
});

Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's devDependencies:

npm install --save classnames-ts

or

for installation via [yarn][yarn]

yarn add classnames-ts

Examples

The classNames function takes any number of arguments which can be a strings, objects or array or a mix of them.

classNames('class1', 'class2'); // => 'class1 class2'
classNames('class1', { class2: true }); // => 'class1 class2'
classNames({ 'class-header': true }); // => 'class-header'
classNames({ 'class-footer': false }); // => ''
classNames({ footer: true }, { header: true }); // => 'footer header'
classNames({ footer: true, header: true }); // => 'footer header'

It's compatible with different types of arguments:

classNames('footer', { header: true, wrapper: false }, 'icon', { bar: true }); // => 'footer header icon bar'
classNames(null, false, 'header', undefined, { bar: null }, ''); // => 'header'

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

[See Bugs][bugs]

License

MIT