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 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'
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 fasterclassnames
replacement. -
classcat
: Another alternative that this repo borrows from.