# class-name-builder

> A small, chainable, immutable utility for building up class name strings in application logic

Latest version **0.1.2** (published 2015-09-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install class-name-builder
pnpm add class-name-builder
yarn add class-name-builder
bun add class-name-builder
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2015-09-25 |
| First published | 2015-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 45 |
| Author | Luke William Westby |
| Maintainers | lukewestby |

## Links

- npm: https://www.npmjs.com/package/class-name-builder
- Repository: https://github.com/lukewestby/class-name-builder
- Homepage: https://github.com/lukewestby/class-name-builder#readme
- Issues: https://github.com/lukewestby/class-name-builder/issues
- npm.io page: https://npm.io/package/class-name-builder

## Recent versions

- 0.1.2 (latest) — 2015-09-25
- 0.1.1 — 2015-09-14
- 0.1.0 — 2015-06-25
- 0.0.3 — 2015-06-25
- 0.0.2 — 2015-06-25

## README

# ClassNameBuilder [![Build Status](https://travis-ci.org/lukewestby/class-name-builder.svg?branch=master)](https://travis-ci.org/lukewestby/class-name-builder)

A small, chainable, immutable utility for building up class name strings in
application logic. Great for use with React's `className` property or Angular's
`ng-class` directive. Improves code readability by avoiding large, complex sets
of nested conditional statements when generating class names in templates or
application code.

## Installation

```
npm install class-name-builder
```

## Example

```javascript
import ClassNameBuilder from 'class-name-builder';

let condition = true;
let otherCondition = false;

const classNames = ClassNameBuilder
  .create()
  .always('example awesome-example')
  .if(condition, 'condition')
  .if(otherCondition, 'other-condition')
  .else(['not-other-condition', 'array'])
  .toString();

console.log(classNames);
// "example awesome-example condition not-other-condition array"
```

## API

### Static methods

* `create(): ClassNameBuilder` : creates a new, empty instance of
`ClassNameBuilder`. `ClassNameBuilder` has no constructor, so this is the only
way to create an instance.

### Instance methods

* `always(value: string | Array<string>): ClassNameBuilder`: creates a new
instance of `ClassNameBuilder` with the given values. If the value is a string,
multiple class names can be included by separating them with one or more spaces,
similar to the `class` HTML attribute. Duplicate class names will be removed in
the case of both a space-separated string and an array.
* `if(condition: any, value: string | Array<string>): ClassNameBuilder`:
creates a new instance of `ClassNameBuilder` with the passed in `value` only
included if the condition is truthy.
* `else(value: string | Array<string>): ClassNameBuilder`: creates a new
instance of `ClassNameBuilder` with the passed in `value` only if the condition
for the preceding `if()` call was falsey. Will throw an error if called without
an immediately preceding call to `if()`.
* `merge(other: ClassNameBuilder): ClassNameBuilder`: creates a new instance of
`ClassNameBuilder` with class names from the passed in instance mixed in with
those in the calling instance.
* `toString(): string`: returns the class names represented by the instance as a
space-separated string.

## Development

```
npm install -g gulp && npm install
```

To bundle with `browserify` and `babelify`:
```
gulp build
```

To run the unit tests with `karma`:
```
gulp test
```

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