https://github.com/jorgebucaran/classcat

Build a class attribute string quickly
https://github.com/jorgebucaran/classcat

class classlist classnames node

Last synced: about 2 months ago
JSON representation

Build a class attribute string quickly

• Host: GitHub
• URL: https://github.com/jorgebucaran/classcat
• Owner: jorgebucaran
• License: mit
• Created: 2017-09-12T15:20:15.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-04-02T20:20:27.000Z (6 months ago)
• Last Synced: 2024-05-02T05:31:14.582Z (5 months ago)
• Topics: class, classlist, classnames, node
• Language: JavaScript
• Homepage:
• Size: 203 KB
• Stars: 901
• Watchers: 12
• Forks: 22
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

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 }) => (

  
 toggle(!isOn)}>

    


    {isOn ? "ON" : "OFF"}

  

)

```


[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

  import cc from "https://unpkg.com/classcat"

```

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