103
GitHub - JorgeBucaran/classwrap: 0.3 KB JavaScript utility for conditionally con...
source link: https://github.com/JorgeBucaran/classwrap
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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>
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK