classix
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 py-2"
);
// => "flex bg-primary-100 m-2 p-2" *assuming isPrimary is true and isLarge is false
Comparison
Sources: classix, clsx, classnames
Sources: Ran benchmark on an AMD Ryzen 5 5600x.
Compared to other librairies, classix simplifies its API by forbidding object arguments, which it considers less ergonomic than string expressions:
// 🚫
cx({ "class-1": isPrimary && isLarge, "class-2": !isPrimary || !isLarge });
// ✅
cx(isPrimary && isLarge ? "class-1" : "class-2");
Highlights
- Fastest & tiniest
- Zero dependencies
- Fully typed (with TypeScript)
- Fully tested
- Follows semantic versioning
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!
4 May 3, 2022
14 Jan 3, 2023
4 Dec 8, 2022
2 Oct 3, 2020
48 Dec 27, 2022
4.3k Jan 1, 2023
7 Jun 2, 2022
18 Nov 3, 2022
6 Nov 26, 2022
91 Aug 18, 2022