The smallest classnames-compatible package yet (I think).

This is an extremely simple javascript utility for conditionally joining classNames together. It’s based on classnames and its various clones and improvements.

This one is 123 bytes, which is several times smaller than classnames. It’s much slower than classnames and clsx, but still runs a few million operations / second. It’s a tradeoff; clsx is a great library if you’re concerned about execution speed.

import cn from 'cnz';

cn('one', 'two', 'three'); // 'one two three'
cn('one', 'two', ['three', 'four', false && 'five']); // 'one two three four'
cn('one', { two: true, three: false }, 'four'); // 'one two four'

The main differences between cnz and classnames is that cnz only supports strings, arrays, and objects. Numbers and booleans are ignored. This is deliberate, as it allows shorthands like results.count || 'empty'.

This is a subtle difference, so cnz should still work as a drop-in replacement for classnames in most cases.

npm install --save cnz

Or without a build step—import it right in your browser.

<script type="module">
  import cnz from "https://unpkg.com/cnz"
</script>

npm --prefix benchmarks start

• classnames: The original and most popular.
• clsx: A smaller and faster classnames replacement.
• classcat: Another alternative that this repo borrows from.

GNU GPLv3