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")
cc(["elf", "orc", "gnome"])
cc({
elf: false,
orc: null,
gnome: undefined,
})
cc({
elf: true,
orc: false,
gnome: true,
})
cc([
{
elf: true,
orc: false,
},
"gnome",
])
Benchmarks
npm --prefix bench start
License
MIT