Package Exports
- classcat
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (classcat) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Classcat
Classcat is a declarative string builder for DOM className properties.
Each class can be conditionally added and removed depending on the falsiness of the value it is paired with. Here is a button you can toggle on and off. Go ahead and try it online.
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>
)
Features
- Tiny (300B)
- Zero dependency
- 5x faster drop-in replacement for JedWatson/classNames
- Framework agnostic—use with React, Preact, Hyperapp—your choice!
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 cclasscat × 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
Classcat is MIT licensed. See LICENSE.