Skip to content

alexnault/classix

Repository files navigation

Banner

classix

NPM version Build Test coverage Monthly downloads Size

The fastest and tiniest utility for conditionally joining classNames.

Installation

npm install classix

Usage

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

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

Comparison

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

// ๐Ÿšซ
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:

Size

Size comparison chart

Sources: classix, clsx, classnames

Performance

Performance comparison chart

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:

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

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

- classnames({ 'class-1': cond1, 'class-2': cond2 });
+ 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!