5.0.5 • Published 23 days ago
classcat v5.0.5
Classcat
Build a
class
attribute string quickly.
- Framework agnostic, reusable, plain vanilla JavaScript.
- Up to 2.5x faster than alternatives.
- 217 B (minified+gzipped). 👌
This module makes it easy to build a space-delimited class
attribute string from an object or array of CSS class names. Just pair each class with a boolean value to add or remove them conditionally.
import cc from "classcat"
export const ToggleButton = ({ isOn, toggle }) => (
<div className="btn" onClick={() => toggle(!isOn)}>
<div
className={cc({
circle: true,
off: !isOn,
on: isOn,
})}
/>
<span className={cc({ textOff: !isOn })}>{isOn ? "ON" : "OFF"}</span>
</div>
)
Try with React, lit-html, Mithril, Superfine
Installation
npm install classcat
Or without a build step—import it right in your browser.
<script type="module">
import cc from "https://unpkg.com/classcat"
</script>
API
cc(names)
cc(names: string | number | object | array): string
import cc from "classcat"
cc("elf") //=> "elf"
cc(["elf", "orc", "gnome"]) //=> "elf orc gnome"
cc({
elf: false,
orc: null,
gnome: undefined,
}) //=> ""
cc({
elf: true,
orc: false,
gnome: true,
}) //=> "elf gnome"
cc([
{
elf: true,
orc: false,
},
"gnome",
]) //=> "elf gnome"
Benchmarks
npm --prefix bench start
License
5.0.5
23 days ago
5.0.4
2 years ago
5.0.3
3 years ago
5.0.2
3 years ago
5.0.1
3 years ago
5.0.0
3 years ago
4.1.0
4 years ago
4.0.2
5 years ago
4.0.1
5 years ago
4.0.0
5 years ago
3.2.5
5 years ago
3.2.4
5 years ago
3.2.3
6 years ago
3.2.2
6 years ago
3.2.1
6 years ago
3.2.0
6 years ago
3.1.2
6 years ago
3.1.1
6 years ago
3.1.0
6 years ago
3.0.2
6 years ago
3.0.1
6 years ago
3.0.0
6 years ago
2.0.0
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
7 years ago