classix

The fastest and tiniest utility for conditionally joining classNames.

Installation

1npm install classix

Usage

Use any amount of string expressions and classix will join them like so:

1import cx from "classix";
2// or
3import { cx } from "classix";
4
5cx("class1", "class2");
6// => "class1 class2"
7
8cx("class1 class2", "class3", "class4 class5");
9// => "class1 class2 class3 class4 class5"
10
11cx("class1", true && "class2");
12// => "class1 class2"
13
14cx(false && "class1", "class2");
15// => "class2"
16
17cx(true ? "class1" : "class2");
18// => "class1"
19
20cx("class1", false ? "class2" : "class3");
21// => "class1 class3"
22
23cx(...["class1", "class2", "class3"]);
24// => class1 class2 class3
25
26cx(
27  "flex",
28  isPrimary ? "bg-primary-100" : "bg-secondary-100",
29  isLarge ? "m-4 p-4" : "m-2 p-2",
30);
31// => "flex bg-primary-100 m-2 p-2" *assuming isPrimary is true and isLarge is false

Comparison

Compared to other libraries, classix only allows string expressions as arguments:

1// 🚫
2clsx({ "class-1": isPrimary });
3// ✅
4cx(isPrimary && "class-1");
5
6// 🚫
7clsx({ "class-1": isPrimary && isLarge, "class-2": !isPrimary || !isLarge });
8// ✅
9cx(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

Size

Sources: classix, clsx, classnames

Performance

Sources: Ran benchmark on an AMD Ryzen 5 5600x with Node 20.

Highlights

• 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

Migrating to classix

If you are using classnames or clsx, you can migrate to classix by changing your imports:

1- import classnames from 'classnames';
2+ import cx from 'classix';

And if you were using object arguments, you'll have to convert them to string arguments:

1- classnames({ 'class-1': cond1, 'class-2': cond2 });
2+ cx(cond1 && 'class-1', cond2 && 'class-2')

That's it!

Some love ❤️

"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

Changelog

For a list of changes and releases, see the changelog.

Contributing

Found a bug, have a question or looking to improve classix? Open an issue, start a discussion or submit a PR!