React :heart: BEM.

Overview

There are two ways to use rebem — with jsx (a separate babel plugin) and without it (out of the box), like this:

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() {
        return BEM(
            {
                ...this.props,
                block: 'boop'
            },
            Beep(
                {
                    mix: {
                        block: 'boop',
                        elem: 'hello'
                    },
                    mods: {
                        size: 'xl'
                    }
                },
                'hello'
            )
        );
    }
}

const Boop = React.createFactory(BoopClass);

render(
    Boop({
        mods: {
            disabled: true
        }
    }),
    document.body
);

<div class="boop boop_disabled">
    <span class="beep beep_type_simple beep_size_xl boop__hello">hello</div>
</div>

Install

npm i -S rebem

Usage

BEM(props, ...children)

is almost the same as

React.createElement(tag/ReactClass, props, ...children)

but tag and props.className are made from special props:

BEM PropTypes

block

Reference.

BEM({
    block: 'beep'
})

<div class="beep"></div>

elem

Reference.

BEM({
    block: 'beep',
    elem: 'boop'
})

<div class="beep__boop"></div>

mods

Reference.

Simple

BEM({
    block: 'beep',
    mods: {
        foo: 'bar'
    }
})

<div class="beep beep_foo_bar"></div>

Boolean

BEM({
    block: 'beep',
    mods: {
        foo: true,
        bar: false
    }
})

<div class="beep beep_foo"></div>

Element

BEM({
    block: 'beep',
    elem: 'boop',
    mods: {
        foo: 'bar'
    }
})

<div class="beep__boop beep__boop_foo_bar"></div>

mix

Reference.

Simple

BEM({
    block: 'beep',
    mix: {
        block: 'boop',
        elem: 'foo'
    }
})

<div class="beep boop__foo"></div>

Multiple

BEM({
    block: 'beep',
    mix: [
        {
            block: 'boop',
            elem: 'foo'
        },
        {
            block: 'bar',
            elem: 'baz',
            mods: {
                test: true
            }
        }
    ]
})

<div class="beep boop__foo bar__baz bar__baz_test"></div>

tag

div by default.

BEM({
    tag: 'span'
})

<span></span>

className

If className is specified, it will be preserved along with BEM classNames.

BEM({
    block: 'boop',
    className: 'beep'
})

<div class="boop beep"></div>

blockFactory

blockFactory can save you a couple of bytes when you have a lot of BEM-entities in the component:

import React from 'react';
import { render } from 'react-dom';
import { blockFactory } from 'rebem';

const Block = blockFactory('beep');

class Beep extends React.Component {
  render() {
    return Block(this.props,
      Block({ elem: 'hello', mods: { size: 'xl' } },
        'hello'
      ),
      Block({ elem: 'jack', mix: { block: 'man' } },
        'Jack'
      )
    );
  }
}

render(
  React.createElement(Beep),
  document.body
);

<div class="beep">
  <div class="beep__hello beep__hello_size_xl">hello</div>
  <div class="beep__jack man">hello</div>
</div>

React PropTypes

References:

• HTML Attributes
• Events System

BEM({
    block: 'image',
    tag: 'img',
    src: 'http://funkyimg.com/i/26jtf.gif',
    alt: 'kitten'
})

<img class="image" src="http://funkyimg.com/i/26jtf.gif" alt="kitten"/>

Notes

Environment

process.env.NODE_ENV must be available. For example in webpack you can do this with DefinePlugin:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV)
        }
    })
]