You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Classwrap is a 0.3 KB JavaScript utility for conditionally concatenating [class names](https://developer.mozilla.org/en-US/docs/Web/API/Element/className).
6
+
Classcat is a 0.3 KB JavaScript utility for conditionally concatenating [class names](https://developer.mozilla.org/en-US/docs/Web/API/Element/className).
7
7
8
8
[Try it Online](https://codepen.io/JorgeBucaran/pen/GMRjRB)
9
9
10
10
```js
11
-
importcwfrom"classwrap"
11
+
importccfrom"classcat"
12
12
13
13
exportfunctionToggleButton({ toggle, isOn }) {
14
14
return (
15
15
<div class="btn" onclick={toggle}>
16
16
<div
17
-
class={cw({
17
+
class={cc({
18
18
circle:true,
19
19
off:!isOn,
20
20
on: isOn
21
21
})}
22
22
/>
23
23
<span
24
-
class={cw({
24
+
class={cc({
25
25
textOff:!isOn
26
26
})}
27
27
>
@@ -32,38 +32,38 @@ export function ToggleButton({ toggle, isOn }) {
32
32
}
33
33
```
34
34
35
-
Classwrap works in all browsers >=IE9. Use it with your favorite JavaScript view library.
35
+
classcat works in all browsers >=IE9. Use it with your favorite JavaScript view library.
npm i <ahref="https://www.npmjs.com/package/classwrap">classwrap</a>
44
+
npm i <ahref="https://www.npmjs.com/package/classcat">classcat</a>
45
45
</pre>
46
46
47
47
Then with a module bundler like [Rollup](https://github.com/rollup/rollup) or [Webpack](https://github.com/webpack/webpack), use as you would anything else.
48
48
49
49
```js
50
-
importcwfrom"classwrap"
50
+
importccfrom"classcat"
51
51
```
52
52
53
-
Or download the minified library from a [unpkg](https://unpkg.com/classwrap@latest/dist/classwrap.js) or [jsDelivr](https://cdn.jsdelivr.net/npm/classwrap@latest/dist/classwrap.js).
53
+
Or download the minified library from a [unpkg](https://unpkg.com/classcat@latest/dist/classcat.js) or [jsDelivr](https://cdn.jsdelivr.net/npm/classcat@latest/dist/classcat.js).
Classwrap joins all elements of an array or keys of an object into a string. If the value associated with a given key is falsy, the key will be ignored.
63
+
classcat joins all elements of an array or keys of an object into a string. If the value associated with a given key is falsy, the key will be ignored.
64
64
65
65
```js
66
-
cw([
66
+
cc([
67
67
"btn",
68
68
{
69
69
"btn-active":true,
@@ -75,7 +75,7 @@ cw([
75
75
Nested arrays or objects are supported too. Use this feature to assemble classes with a common prefix.
76
76
77
77
```js
78
-
cw([
78
+
cc([
79
79
"tab",
80
80
{
81
81
tab: {
@@ -89,18 +89,18 @@ cw([
89
89
90
90
## Credits
91
91
92
-
Classwrap was inspired by [JedWatson/classnames](https://github.com/JedWatson/classnames) with support for nested objects and [improved](/bench/README.md) performance. It differs from classnames in that it does not accept [variable arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments).
92
+
classcat was inspired by [JedWatson/classnames](https://github.com/JedWatson/classnames) with support for nested objects and [improved](/bench/README.md) performance. It differs from classnames in that it does not accept [variable arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments).
93
93
94
94
```js
95
-
cw("foo", "bar", "baz") // => foo
95
+
cc("foo", "bar", "baz") // => foo
96
96
```
97
97
98
98
To solve this, wrap the arguments inside an array.
99
99
100
100
```js
101
-
cw(["foo", "bar", "baz"]) // => foo bar baz
101
+
cc(["foo", "bar", "baz"]) // => foo bar baz
102
102
```
103
103
104
104
## License
105
105
106
-
Classwrap is MIT licensed. See [LICENSE](LICENSE.md).
106
+
classcat is MIT licensed. See [LICENSE](LICENSE.md).
0 commit comments