Classwrap

Classwrap is a (340B) JavaScript function for conditionally concatenating class names.

Try it Online

function HelloButton({ active, label }) {
  const name = classwrap([
    "btn",
    "btn-large",
    {
      "btn-active": active
    }
  ])

  return <button class={name}>{label}</button>
}

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.