<commit_before>[![npm](https://img.shields.io/npm/v/rebem.svg?style=flat-square)](https://www.npmjs.com/package/rebem)
[![travis](http://img.shields.io/travis/rebem/rebem.svg?style=flat-square)](https://travis-ci.org/rebem/rebem)
[![coverage](https://img.shields.io/codecov/c/github/rebem/rebem.svg?style=flat-square)](https://codecov.io/github/rebem/rebem)
[![deps](https://img.shields.io/gemnasium/rebem/rebem.svg?style=flat-square)](https://gemnasium.com/rebem/rebem)

[React](https://facebook.github.io/react/) + [BEM](http://getbem.com/).

## Overview

```js
import { Component } from 'react';
import { render } from 'react-dom';
import { BEM } from 'rebem';

class BeepClass extends Component {
    render() {
        return BEM(
            {
                ...this.props,
                block: 'beep',
                tag: 'span',
                mods: {
                    type: 'simple',
                    ...this.props.mods
                }
            },
            this.props.children
        );
    }
}

const Beep = React.createFactory(BeepClass);

class BoopClass extends Component {
    render() {<commit_msg>:pencil: better intro + jsx usage<commit_after>[![npm](https://img.shields.io/npm/v/rebem.svg?style=flat-square)](https://www.npmjs.com/package/rebem)
[![travis](http://img.shields.io/travis/rebem/rebem.svg?style=flat-square)](https://travis-ci.org/rebem/rebem)
[![coverage](https://img.shields.io/codecov/c/github/rebem/rebem.svg?style=flat-square)](https://codecov.io/github/rebem/rebem)
[![deps](https://img.shields.io/gemnasium/rebem/rebem.svg?style=flat-square)](https://gemnasium.com/rebem/rebem)

Probably the best way to work with [BEM](http://getbem.com/) in [React](https://facebook.github.io/react/) ecosystem.

## Overview

There are two ways to use `rebem` — with jsx ([a separate babel plugin](https://github.com/rebem/rebem-jsx)) and without it (out of the box), like this:

```js
import { Component } from 'react';
import { render } from 'react-dom';
import { BEM } from 'rebem';

class BeepClass extends Component {
    render() {
        return BEM(
            {
                ...this.props,
                block: 'beep',
                tag: 'span',
                mods: {
                    type: 'simple',
                    ...this.props.mods
                }
            },
            this.props.children
        );
    }
}

const Beep = React.createFactory(BeepClass);

class BoopClass extends Component {
    render() {
{'fraction_non_alphanumeric': 0.1753821399839099, 'fraction_numerical': 0.0, 'mean_word_length': 2.4445983379501386, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 17, 'lorem ipsum': 0, 'www.': 2, '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': '3123806', 'n_tokens_mistral': 869, 'n_tokens_neox': 834, 'n_words': 126}