File size: 1,845 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
# 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)
|