classcat

What is classcat?

The classcat npm package is a utility for conditionally combining class names. It is useful in scenarios where you need to dynamically apply multiple class names based on certain conditions, making it particularly handy in React and other component-based frameworks.

What are classcat's main functionalities?

Combining Class Names

This feature allows you to combine multiple class names into a single string. It is useful when you have a list of class names that you want to apply to an element.

const cc = require('classcat');
const className = cc(['class1', 'class2']);
console.log(className); // Output: 'class1 class2'

Conditional Class Names

This feature allows you to conditionally apply class names based on boolean values. Only the class names with a true value will be included in the final string.

const cc = require('classcat');
const className = cc({ 'class1': true, 'class2': false });
console.log(className); // Output: 'class1'

Nested Arrays

This feature supports nested arrays and objects, allowing for more complex class name combinations. It will recursively process the nested structures to generate the final class name string.

const cc = require('classcat');
const className = cc(['class1', ['class2', { 'class3': true }]]);
console.log(className); // Output: 'class1 class2 class3'

Other packages similar to classcat

classnames

The classnames package is another utility for conditionally combining class names. It offers similar functionality to classcat, allowing you to combine class names based on various conditions. The main difference is in the API design and usage patterns.

clsx

The clsx package is a tiny utility for constructing className strings conditionally. It is similar to classcat in terms of functionality but is designed to be even smaller and faster. It also supports nested arrays and objects for complex class name combinations.

README

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