Skip to content
Declarative string builder optimized for DOM className properties
Branch: master
Clone or download
Latest commit 905dedd Feb 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bench bench: add latest copy-cat in the block Jan 1, 2019
src refactor: rename next→tmp Aug 18, 2018
test test: so we can import by name in ts test Sep 3, 2018
.gitignore
.travis.yml
LICENSE.md JorgeBucaran→jorgebucaran & KB→kB Feb 27, 2018
README.md
classcat.d.ts docs: use new classcat definition Sep 3, 2018
package.json

README.md

Classcat

CI Codecov npm

Classcat is a declarative string builder optimized for DOM className properties. It's tiny (300B), fast and framework agnostic—use it with React, Preact, Hyperapp—your choice!

Classes are conditionally added or removed based on the falsiness of the value you pair it with. Here is an example with a button you can toggle on and off.

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>
)

Installation

npm i classcat

Don't want to set up a build environment? Download classcat from a CDN and it will be globally available through the window.classcat object. Classcat works in all browsers >= IE9.

<script src="https://unpkg.com/classcat"></script>

Usage

Classcat expects an array of elements or an object of key/value pairs and joins all the elements in the array and object keys. Falsy array elements and object properties will be ignored. Single string or number values need not be in an array.

import cc from "classcat"

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

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

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

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

Arrays will be recursively flattened as per the rules above.

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

Variable number of arguments are not supported. Wrap multiple arguments in an array.

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

Use to set the class/className of an element created with your chosen view framework.

const popupView = popup => (
  <div
    class={cc({
      popup: true,
      "popup-important": popup.isImportant,
      "popup-seen": popup.isSeen
    })}
  >
    {popup.content}
  </div>
)

API

default(names)

names

A number, string, object or array. Objects consist of className/value pairs. Arrays are recursively reduced, therefore elements can be of any type aforementioned. Truthy values are added to the output, falsy values are ignored.

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

Benchmark Results

All benchmarks run on a 2.4GHz Intel Core i7 CPU with 16 GB memory.

npm run build && npm i -C bench && npm -C bench start
# Strings
classcat × 15,009,674 ops/sec
classnames × 3,191,312 ops/sec
clsx × 2,563,378 ops/sec

# Objects
classcat × 20,053,517 ops/sec
classnames × 3,479,564 ops/sec
clsx × 2,509,453 ops/sec

# Strings & Objects
classcat × 11,317,394 ops/sec
classnames × 3,006,549 ops/sec
clsx × 2,100,306 ops/sec

# Arrays
classcat × 4,142,953 ops/sec
classnames × 986,519 ops/sec
clsx × 531,326 ops/sec

# Arrays & Objects
classcat × 4,892,534 ops/sec
classnames × 2,354,448 ops/sec
clsx × 1,194,463 ops/sec

License

MIT

You can’t perform that action at this time.