@orca-fe/clsx-dedupe
v1.2.1
Published
`clsx` dedupe version
Downloads
2
Readme
clsx
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';
// or
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.
Tailwind Support
Here some additional (optional) steps to enable classes autocompletion using clsx
with Tailwind CSS.
Install the "Tailwind CSS IntelliSense" Visual Studio Code extension
Add the following to your
settings.json
:
{
"tailwindCSS.experimental.classRegex": [
["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]
}
Related
- obj-str - A smaller (96B) and similiar utility that only works with Objects.
License
MIT © Luke Edwards