classcat Build a space-separated class attribute quickly

Classcat

Build a space-separated class attribute quickly.

• Easily add and remove class names based on a truthy or falsy value.
• Works best when paired with a view framework. which will it be?
• Ridiculously tiny at 260B . No dependencies.

Quickstart

npm i classcat

Don't want to set up a build step? Import it inside a <script> tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.

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

Classcat takes an array of strings or name-value object and joins all the truthy values into a space-separated string. Arrays may be nested too. That's really all there is to it. Here's the first example to get you started.

import cc from "classcat"

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

API

cc(string | number | object | array)

import cc from "classcat"

cc("foo") //=> "foo"

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

cc({ foo: false, bar: null, baz: undefined }) //=> ""

cc({ foo: true, bar: false, baz: true }) //=> "foo baz"

cc([{ foo: true, bar: false }, "baz"]) //=> "foo baz"

Run the benchmarks

npm run build && npm i -C bench && npm -C bench start

# Strings
classcat × 15,927,163 ops/sec
classnames × 2,694,533 ops/sec
clsx × 8,542,847 ops/sec

# Objects
classcat × 15,205,051 ops/sec
classnames × 2,873,497 ops/sec
clsx × 8,806,231 ops/sec

# Strings/Objects
classcat × 13,834,475 ops/sec
classnames × 3,013,424 ops/sec
clsx × 5,890,821 ops/sec

# Arrays
classcat × 3,649,723 ops/sec
classnames × 709,177 ops/sec
clsx × 2,513,014 ops/sec

# Arrays/Objects
classcat × 4,290,009 ops/sec
classnames × 1,856,967 ops/sec
clsx × 3,099,573 ops/sec

# Arguments vs Array
classcat × 3,089,353 ops/sec
classnames × 828,906 ops/sec
clsx × 3,057,879 ops/sec

License

MIT