Classcat
Build a
classattribute 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 classcatOr 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): stringimport 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