classix 2.1.14 → 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 +35 -5
- 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.
|
|
@@ -90,6 +102,24 @@ Sources: Ran [benchmark](benchmark/) on an AMD Ryzen 5 5600x.
|
|
|
90
102
|
- Fully tested
|
|
91
103
|
- [Semver](https://semver.org/) compliant
|
|
92
104
|
|
|
105
|
+
## Migrating to classix
|
|
106
|
+
|
|
107
|
+
If you are using `classnames` or `clsx`, you can migrate to `classix` by changing your `imports`:
|
|
108
|
+
|
|
109
|
+
```diff
|
|
110
|
+
- import classnames from 'classnames';
|
|
111
|
+
+ import cx from 'classix';
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
And if you were using object arguments, you'll have to convert them to string arguments:
|
|
115
|
+
|
|
116
|
+
```diff
|
|
117
|
+
- classnames({ 'class-1': cond1, 'class-2': cond2 });
|
|
118
|
+
+ cx(cond1 && 'class-1', cond2 && 'class-2')
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
That's it!
|
|
122
|
+
|
|
93
123
|
## Changelog
|
|
94
124
|
|
|
95
125
|
For a list of changes and releases, see the [changelog](https://github.com/alexnault/classix/releases).
|