Package Exports

classcat

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (classcat) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Classcat

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

Try it Online

import cc from "classcat"

export function ToggleButton({ toggle, isOn }) {
  return (
    <div class="btn" onclick={toggle}>
      <div
        class={cc({
          circle: true,
          off: !isOn,
          on: isOn
        })}
      />
      <span
        class={cc({
          textOff: !isOn
        })}
      >
        {isOn ? "ON" : "OFF"}
      </span>
    </div>
  )
}

Classcat works in all browsers >= IE9 and you can use it with your favorite JavaScript UI library.

Installation

Install with npm / Yarn.

npm i classcat

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import cc from "classcat"

Or download the minified library from a unpkg or jsDelivr.

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

Then find it on window.classcat.

Usage

Classcat 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.

cc([
  "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.

cc([
  "tab",
  {
    tab: {
      "--success": true,
      "--error": false,
      "--pending": false
    }
  }
]) // => tab tab--success

Credits

Classcat is inspired by JedWatson/classNames with support for nested objects and better performance. It differs from classNames in that it does not accept variable arguments.

cc("foo", "bar", "baz") // => foo

To work around this, wrap the arguments inside an array.

cc(["foo", "bar", "baz"]) // => foo bar baz

License

Classcat is MIT licensed. See LICENSE.