Wondering what’s next for npm?Check out our public roadmap! »

    classcat
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.3 • Public • Published

    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

    Install

    npm i classcat

    DownloadsWeekly Downloads

    29,741

    Version

    5.0.3

    License

    MIT

    Unpacked Size

    5.17 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar