jorgebucaran/classcat

Build a class attribute string quickly

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