The fastest and tiniest utility for conditionally joining classNames.
npm install classix!NPM version
!Build
!Test coverage
!Monthly downloads
!Size
The fastest and tiniest utility for conditionally joining classNames.
``bash`
npm install classix
Use any amount of string expressions and classix will join them like so:
`js
import cx from "classix";
// or
import { cx } from "classix";
cx("class1", "class2");
// => "class1 class2"
cx("class1 class2", "class3", "class4 class5");
// => "class1 class2 class3 class4 class5"
cx("class1", true && "class2");
// => "class1 class2"
cx(false && "class1", "class2");
// => "class2"
cx(true ? "class1" : "class2");
// => "class1"
cx("class1", false ? "class2" : "class3");
// => "class1 class3"
cx(...["class1", "class2", "class3"]);
// => class1 class2 class3
cx(
"flex",
isPrimary ? "bg-primary-100" : "bg-secondary-100",
isLarge ? "m-4 p-4" : "m-2 p-2",
);
// => "flex bg-primary-100 m-2 p-2" *assuming isPrimary is true and isLarge is false
`
Compared to other libraries, classix only allows string expressions as arguments:
`js
// 🚫
clsx({ "class-1": isPrimary });
// ✅
cx(isPrimary && "class-1");
// 🚫
clsx({ "class-1": isPrimary && isLarge, "class-2": !isPrimary || !isLarge });
// ✅
cx(isPrimary && isLarge ? "class-1" : "class-2");
`
String expressions have a few benefits over objects:
- A faster typing experience
- A more intuitive syntax (conditions first)
- else support through ternary operators
What's more, by leveraging them, classix provides:
- A simpler and consistent API
- A smaller library size
- Better performance
Sources: classix, clsx, classnames
Sources: Ran benchmark on an AMD Ryzen 5 5600x with Node 20.
- Supports all major browsers
- Supports all versions of Node.js
- Works with both ES Modules and CommonJS
- Zero dependencies
- Fully typed with TypeScript
- Fully tested
- Semver compliant
If you are using classnames or clsx, you can migrate to classix by changing your imports:
`diff`
- import classnames from 'classnames';
+ import cx from 'classix';
And if you were using object arguments, you'll have to convert them to string arguments:
`diff``
- classnames({ 'class-1': cond1, 'class-2': cond2 });
+ cx(cond1 && 'class-1', cond2 && 'class-2')
That's it!
> "This looks great. I agree that the object notation is not great and not worth the perf hit." — @jmeistrich
> "It looks good! I like the idea that you can’t pass objects and is simple and minimal. I will use it on my next application instead of classnames." — @m0ment98
> "Thank you for creating and maintaining this package! It is great." — @charkour
For a list of changes and releases, see the changelog.
Found a bug, have a question or looking to improve classix? Open an issue, start a discussion or submit a PR!