Skip to content
Build a class attribute string quickly.
JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 1290dfc May 21, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
bench
src
test
.gitignore
LICENSE.md
README.md
classcat.d.ts
package.json

README.md

Classcat npm

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?
  • Up to 2.5x faster than the alternatives (run the benchmarks).
  • 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 class="btn">
    <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

You can’t perform that action at this time.