Classwrap is a 0.3 KB JavaScript utility for conditionally concatenating class names.
import cw from "classwrap"
export function ToggleButton({ toggle, isOn }) {
return (
<div class="btn" onclick={toggle}>
<div
class={cw({
circle: true,
off: !isOn,
on: isOn
})}
/>
<span
class={cw({
textOff: !isOn
})}
>
{isOn ? "ON" : "OFF"}
</span>
</div>
)
}
Classwrap works in all browsers >=IE9. 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 cw from "classwrap"
Or download the minified library from a unpkg or jsDelivr.
<script src="https://unpkg.com/classwrap"></script>
Then find it 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.
cw([
"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.
cw([
"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.
cw("foo", "bar", "baz") // => foo
To solve this, wrap the arguments inside an array.
cw(["foo", "bar", "baz"]) // => foo bar baz
Classwrap is MIT licensed. See LICENSE.