classwrap

Classwrap

Classwrap is a 0.3 KB JavaScript utility for conditionally concatenating class names.

Try it Online

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.

Installation

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.

Usage

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

Credits

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

License

Classwrap is MIT licensed. See LICENSE.