classcat

Classcat

Build a class attribute string quickly.

• Framework agnostic, reusable, plain vanilla JavaScript.
• Up to 2.5x faster than alternatives.
• 217 B (minified+gzipped). 👌

This module makes it easy to build a space-delimited class attribute string from an object or array of CSS class names. Just pair each class with a boolean value to add or remove them conditionally.

import cc from "classcat"

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

Try with React, lit-html, Mithril, Superfine

Installation

npm install classcat

Or without a build step—import it right in your browser.

<script type="module">
  import cc from "https://unpkg.com/classcat"
</script>

API

cc(names)

cc(names: string | number | object | array): string

import cc from "classcat"

cc("elf") //=> "elf"

cc(["elf", "orc", "gnome"]) //=> "elf orc gnome"

cc({
  elf: false,
  orc: null,
  gnome: undefined,
}) //=> ""

cc({
  elf: true,
  orc: false,
  gnome: true,
}) //=> "elf gnome"

cc([
  {
    elf: true,
    orc: false,
  },
  "gnome",
]) //=> "elf gnome"

Benchmarks

npm --prefix bench start

License

MIT

Similar packages

Other packages similar to classcat

classnames

The classnames package is another utility for conditionally combining class names. It offers similar functionality to classcat, allowing you to combine class names based on various conditions. The main difference is in the API design and usage patterns.

clsx

The clsx package is a tiny utility for constructing className strings conditionally. It is similar to classcat in terms of functionality but is designed to be even smaller and faster. It also supports nested arrays and objects for complex class name combinations.