node package manager



Travis CI Codecov npm

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

Try it live here.

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

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


Install with npm or Yarn.

npm i classcat

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

import cc from "classcat"

If you prefer not to use a build system, you can load Classcat from a CDN and it will be globally available through the window.classcat object.

<script src=""></script>


Classcat is a unary function (accepts a single argument) expecting an array of elements or an object of keys and returns a string that is the result of joining all elements of the array or object keys.

If the value associated with a given key is false or evaluates to false it will be ignored.

    "btn-active": true,
    "btn-large": false
]) // => btn btn-active

Prior Art

Classcat is a faster alternative to JedWatson/classNames. The difference between classcat and classNames is that classNames accepts a variable number of arguments, whereas classcat only accepts a single argument.

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

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

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


Classcat is MIT licensed. See LICENSE.