Classwrap is a 0.3 KB JavaScript utility for conditionally concatenating class names.
function ToggleButton({ toggle, isOn }) {
return (
<div class="btn" onclick={toggle}>
<div
class={classwrap({
circle: true,
off: !isOn,
on: isOn
})}
/>
<span
class={classwrap({
textOff: !isOn
})}
>
{isOn ? "ON" : "OFF"}
</span>
</div>
)
}
Classwrap works in all browsers >=IE9 and you can use it with your favorite JavaScript view library.
Install with npm / Yarn.
npm i classwrap
Then with a module bundler like rollup or webpack, use as you would anything else.
import classwrap from "classwrap"
Or download the minified library from the CDN.
<script src="https://unpkg.com/classwrap"></script>
You can find the function on window.classwrap
.
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.
classwrap([
"btn",
{
"btn-active": true,
"btn-large": false
}
]) // => btn btn-active
Nested arrays or objects are supported too. Use this feature to assemble classes with a common prefix.
classwrap([
"tab",
{
tab: {
"--success": true,
"--error": false,
"--pending": false
}
}
]) // => tab tab--success
Classwrap was inspired by JedWatson/classnames with support for nested objects and improved performance. It differs from classnames in that it does not accept variable arguments.
classwrap("foo", "bar", "baz") // => foo
To solve this, wrap the arguments inside an array.
classwrap(["foo", "bar", "baz"]) // => foo bar baz
Classwrap is MIT licensed. See LICENSE.