<commit_before>
[![Build Status](https://travis-ci.org/14islands/bem-chain-js.svg?branch=master)](https://travis-ci.org/14islands/bem-chain-js)

# bem-chain-js
JavaScript helper for generating BEM class names with chainable API for adding modifiers and elements.


## Basic Usage

```javascript
import BEM from 'bem-chain-js';

assert.equal(BEM('my-block'), 'my-block');
assert.equal(BEM('my-block').el('element'), 'my-block__element');
assert.equal(BEM('my-block').is('active'), 'my-block my-block--active');
assert.equal(BEM('my-block').el('element').is('active'), 'my-block__element my-block__element--active');
```


## Conditional Modifiers

Sometimes it's useful to decide if a modifier class should be present at runtime. The `is()` function takes an optional second parameter which specifies if the class should be added.

```javascript
import BEM from 'bem-chain-js';

assert.equal(BEM('my-block'), 'my-block');
assert.equal(BEM('my-block').is('active', true), 'my-block my-block--active');
assert.equal(BEM('my-block').is('active', false), 'my-block');
```


## Usage with React

This helper was mainly developed to make it faster to write class names in JSX with React.

A common use case is to match the CSS Block name with the JavaScript class name. 

Simply pass the class instance `this` as the first argument to `BEM()` and the block name will be set to match the constructor name. This works for both ES5 and ES6 classes.

```javascript
import BEM from 'bem-chain-js';

export class MyComponent {
  render() {
    return (
      <div className={BEM(this).is('active', this.props.active)}>
        <h1 className={BEM(this).is('title')}>
          My title
        </h1>
      </div>
    );
  }
);
```

Assuming `this.props.active` is `true` this will output:

```html
<div class="MyComponent MyComponent--active">
  <h1 class="MyComponent__title">My title</h1>
</div>
```
<commit_msg>Docs: added section on multiple modifiers and non-BEM classes<commit_after>
[![Build Status](https://travis-ci.org/14islands/bem-chain-js.svg?branch=master)](https://travis-ci.org/14islands/bem-chain-js)

# bem-chain-js
JavaScript helper for generating BEM class names with chainable API for adding modifiers and elements.


## Basic Usage

```javascript
import BEM from 'bem-chain-js';

assert.equal(BEM('my-block'), 'my-block');
assert.equal(BEM('my-block').el('element'), 'my-block__element');
assert.equal(BEM('my-block').is('active'), 'my-block my-block--active');
assert.equal(BEM('my-block').el('element').is('active'), 'my-block__element my-block__element--active');
```


## Conditional Modifiers

Sometimes it's useful to decide if a modifier class should be present at runtime. The `is()` function takes an optional second parameter which specifies if the class should be added.

```javascript
import BEM from 'bem-chain-js';

let isActive = true;

assert.equal(BEM('my-block').is('active', isActive), 'my-block my-block--active');

let isActive = false;

assert.equal(BEM('my-block').is('active', isActive), 'my-block');
```


## Multiple Modifiers

```javascript
import BEM from 'bem-chain-js';

assert.equal(BEM('my-block').is('wide').is('active), 'my-block my-block--wide my-block--active');
```


## Mix with non-BEM classes

```javascript
import BEM from 'bem-chain-js';

assert.equal(BEM('my-block').is('wide').add('grid-wide'), 'my-block my-block--wide grid-wide');
```


## Usage with React

This helper was mainly developed to make it faster to write class names in JSX with React.

A common use case is to match the CSS Block name with the JavaScript class name. 

Simply pass the class instance `this` as the first argument to `BEM()` and the block name will be set to match the constructor name. This works for both ES5 and ES6 classes.

```javascript
import BEM from 'bem-chain-js';

export class MyComponent {
  render() {
    return (
      <div className={BEM(this).is('active', this.props.active)}>
        <h1 className={BEM(this).is('title')}>
          My title
        </h1>
      </div>
    );
  }
);
```

Assuming `this.props.active` is `true` this will output:

```html
<div class="MyComponent MyComponent--active">
  <h1 class="MyComponent__title">My title</h1>
</div>
```

{'fraction_non_alphanumeric': 0.16009501187648456, 'fraction_numerical': 0.004750593824228029, 'mean_word_length': 4.412596401028278, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1808975', 'n_tokens_mistral': 1382, 'n_tokens_neox': 1330, 'n_words': 404}