# xcls

> merge html classnames with conditions

Latest version **0.1.5** (published 2021-02-07) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2021-02-07 |
| First published | 2020-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | khaled |
| Maintainers | 5alid |

## Links

- npm: https://www.npmjs.com/package/xcls
- npm.io page: https://npm.io/package/xcls

## Recent versions

- 0.1.5 (latest) — 2021-02-07
- 0.1.4 — 2021-01-05
- 0.1.3 — 2021-01-05
- 0.1.1 — 2020-11-24
- 0.1.0 — 2020-11-24

## README

## xcls

merge html classnames with conditions

## Install

```
npm i xcls
```

or

```
yarn add xcls
```

## Usage

```js
import cls from 'xcls';

// signature -> cls(...args: (string | [boolean, string, string?] | null | undefined)[]): string;

// basic example
cls('px-4 py-1', 'bg-purple'); // 'px-4 py-1 bg-purple'

// with conditions
let isButtonActive = true;
cls('px-4 py-1', [isButtonActive, 'bg-blue', 'bg-purple']); // 'px-4 py-1 bg-blue'

// state changes
isButtonActive = false;
cls('px-4 py-1', [isButtonActive, 'bg-blue', 'bg-purple']); // 'px-4 py-1 bg-purple'
```

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