History

Ahmet Guzererler 7dd7a5c0b6 fix: migrate backend to port 8088 and use 127.0.0.1 to avoid macOS system conflicts - move backend port from 8001 to 8088 - update frontend to use 127.0.0.1 explicitly instead of localhost - add request/response logging middleware to backend - fix explicit CORS origin matching for browser compatibility		2026-03-22 22:51:09 +01:00
..
LICENSE.md	fix: migrate backend to port 8088 and use 127.0.0.1 to avoid macOS system conflicts	2026-03-22 22:51:09 +01:00
README.md	fix: migrate backend to port 8088 and use 127.0.0.1 to avoid macOS system conflicts	2026-03-22 22:51:09 +01:00
index.cjs	fix: migrate backend to port 8088 and use 127.0.0.1 to avoid macOS system conflicts	2026-03-22 22:51:09 +01:00
index.d.ts	fix: migrate backend to port 8088 and use 127.0.0.1 to avoid macOS system conflicts	2026-03-22 22:51:09 +01:00
index.js	fix: migrate backend to port 8088 and use 127.0.0.1 to avoid macOS system conflicts	2026-03-22 22:51:09 +01:00
package.json	fix: migrate backend to port 8088 and use 127.0.0.1 to avoid macOS system conflicts	2026-03-22 22:51:09 +01:00

README.md

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