classix 2.1.15 → 2.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
The [fastest](#
|
|
9
|
+
The [fastest](#performance) and [tiniest](#size) utility for conditionally joining classNames.
|
|
10
10
|
|
|
11
11
|
## Installation
|
|
12
12
|
|
|
@@ -52,9 +52,9 @@ cx(
|
|
|
52
52
|
// => "flex bg-primary-100 m-2 p-2" *assuming isPrimary is true and isLarge is false
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
##
|
|
55
|
+
## Comparison
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
Compared to other libraries, classix only allows string expressions as arguments:
|
|
58
58
|
|
|
59
59
|
```js
|
|
60
60
|
// 🚫
|
|
@@ -68,14 +68,26 @@ clsx({ "class-1": isPrimary && isLarge, "class-2": !isPrimary || !isLarge });
|
|
|
68
68
|
cx(isPrimary && isLarge ? "class-1" : "class-2");
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
String expressions have a few benefits over objects:
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
- A faster typing experience
|
|
74
|
+
- A more intuitive syntax (conditions first)
|
|
75
|
+
- `else` support through ternary operators
|
|
76
|
+
|
|
77
|
+
What's more, by leveraging them, classix provides:
|
|
78
|
+
|
|
79
|
+
- A simpler and consistent API
|
|
80
|
+
- [A smaller library size](#size)
|
|
81
|
+
- [Better performance](#performance)
|
|
82
|
+
|
|
83
|
+
### Size
|
|
74
84
|
|
|
75
85
|
|
|
76
86
|
|
|
77
87
|
Sources: [classix](https://bundlejs.com/api?q=classix), [clsx](https://bundlejs.com/api?q=clsx), [classnames](https://bundlejs.com/api?q=classnames)
|
|
78
88
|
|
|
89
|
+
### Performance
|
|
90
|
+
|
|
79
91
|
|
|
80
92
|
|
|
81
93
|
Sources: Ran [benchmark](benchmark/) on an AMD Ryzen 5 5600x.
|
|
@@ -102,8 +114,8 @@ If you are using `classnames` or `clsx`, you can migrate to `classix` by changin
|
|
|
102
114
|
And if you were using object arguments, you'll have to convert them to string arguments:
|
|
103
115
|
|
|
104
116
|
```diff
|
|
105
|
-
- classnames({ 'class-1':
|
|
106
|
-
+ cx(
|
|
117
|
+
- classnames({ 'class-1': cond1, 'class-2': cond2 });
|
|
118
|
+
+ cx(cond1 && 'class-1', cond2 && 'class-2')
|
|
107
119
|
```
|
|
108
120
|
|
|
109
121
|
That's it!
|