classwrap

Classwrap

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

Hello World

Try it Online

function HelloButton(props) {
  const name = classwrap([
    "btn",
    "btn-large",
    {
      "btn-pressed": props.isPressed
    }
  ])
  return <button class={name}>{props.label}</button>
}

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.

License

Classwrap is MIT licensed. See LICENSE.