clsx
![codecov](https://camo.githubusercontent.com/148fac43b2d905e14a3a2b37e2f088980d15e7d145f0217ecec4a8ad982b7a35/68747470733a2f2f62616467656e2e6e65742f636f6465636f762f632f6769746875622f6c756b6565642f636c7378)
A tiny (228B) utility for constructing
className
strings conditionally.
Also serves as a faster & smaller drop-in replacement for theclassnames
module.
This module is available in three formats:
- ES Module:
dist/clsx.m.js
- CommonJS:
dist/clsx.js
- UMD:
dist/clsx.min.js
Install
$ npm install --save clsx
Usage
import clsx from 'clsx';
// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'
// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'
// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'
// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'
// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'
// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'
API
clsx(...input)
Returns: String
input
Type: Mixed
The clsx
function can take any number of arguments, each of which can be an Object, Array, Boolean, or String.
Important: Any falsey values are discarded!
Standalone Boolean values are discarded as well.
clsx(true, false, '', null, undefined, 0, NaN);
//=> ''
Benchmarks
For snapshots of cross-browser results, check out the bench
directory~!
Support
All versions of Node.js are supported.
All browsers that support Array.isArray
are supported (IE9+).
Note: For IE8 support and older, please install
[email protected]
and beware of #17.
Related
- obj-str - A smaller (96B) and similiar utility that only works with Objects.
License
MIT © Luke Edwards