Classwrap

Classwrap is a (320B) JavaScript function for conditionally concatenating classNames.

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 >=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 wrap from "classwrap"

Or download the minified library from the CDN.

<script src="https://unpkg.com/classwrap"></script>

You can find the library 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, that key will be ignored.

classwrap([
  "btn",
  {
    "btn-active": true,
    "btn-large": false
  }
]) // => btn btn-active

Nested arrays or objects are supported too. This feature can be useful to create classes with a similar 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.