classix 2.1.15 β 2.1.17
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 +27 -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,12 +114,20 @@ 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!
|
|
110
122
|
|
|
123
|
+
## Some love β€οΈ
|
|
124
|
+
|
|
125
|
+
> "This looks great. I agree that the object notation is not great and not worth the perf hit." β @jmeistrich
|
|
126
|
+
|
|
127
|
+
> "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
|
|
128
|
+
|
|
129
|
+
> "Thank you for creating and maintaining this package! It is great." β @charkour
|
|
130
|
+
|
|
111
131
|
## Changelog
|
|
112
132
|
|
|
113
133
|
For a list of changes and releases, see the [changelog](https://github.com/alexnault/classix/releases).
|