# classcat

> Build a class attribute string quickly.

Latest version **5.0.5** (published 2024-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install classcat
pnpm add classcat
yarn add classcat
bun add classcat
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.5 |
| Published | 2024-04-02 |
| First published | 2017-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 911 |
| Author | Jorge Bucaran |
| Maintainers | jorgebucaran |
| Keywords | classnames, classlist, class |

## Links

- npm: https://www.npmjs.com/package/classcat
- Repository: https://github.com/jorgebucaran/classcat
- Homepage: https://github.com/jorgebucaran/classcat#readme
- Issues: https://github.com/jorgebucaran/classcat/issues
- npm.io page: https://npm.io/package/classcat

## Recent versions

- 5.0.5 (latest) — 2024-04-02
- 5.0.4 — 2022-08-18
- 5.0.3 — 2021-02-20
- 5.0.2 — 2021-02-19
- 5.0.1 — 2021-02-13
- 5.0.0 — 2021-02-13
- 4.1.0 — 2020-05-21
- 4.0.2 — 2019-06-29
- 4.0.1 — 2019-06-28
- 4.0.0 — 2019-06-27
- 3.2.5 — 2019-01-01
- 3.2.4 — 2019-01-01
- 3.2.3 — 2018-09-03
- 3.2.2 — 2018-09-03
- 3.2.1 — 2018-08-18
- … 16 more at https://npm.io/package/classcat/versions

## README

# Classcat

> Build a [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute string quickly.

- Framework agnostic, reusable, plain vanilla JavaScript.
- Up to [2.5x faster](#benchmarks) than alternatives.
- [217 B](http://bundlephobia.com/result?p=classcat) (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.

```js
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](https://codepen.io/jorgebucaran/pen/NYgLwG?editors=0010), [lit-html](https://codepen.io/jorgebucaran/pen/LjPJEp?editors=1000), [Mithril](https://codepen.io/jorgebucaran/pen/JjjOjwB?editors=1100), [Superfine](https://codepen.io/jorgebucaran/pen/wrMvjz?editors=1000)

## Installation

```console
npm install classcat
```

Or without a build step—import it right in your browser.

```html
<script type="module">
  import cc from "https://unpkg.com/classcat"
</script>
```

## API

### `cc(names)`

```ps
cc(names: string | number | object | array): string
```

```js
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

```console
npm --prefix bench start
```

## License

[MIT](LICENSE.md)

---
_Source: https://npm.io/package/classcat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._