cnz (“classnamez”)

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 151 bytes (146 gzipped), 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';

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

Differences

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.

Installation

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>

Benchmarks

npm --prefix benchmarks start

Similar packages

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

License

GNU GPLv3