0.9.3 • Published 9 years ago

rebem v0.9.3

Weekly downloads
5
License
MIT
Repository
github
Last release
9 years ago

npm travis coverage deps gitter

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:

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)
        }
    })
]
0.9.3

9 years ago

0.9.2

9 years ago

0.9.1

9 years ago

0.9.0

9 years ago

0.8.0

9 years ago

0.7.1

9 years ago

0.7.0

9 years ago

0.6.0

9 years ago

0.5.0

9 years ago

0.4.3

10 years ago

0.4.2

10 years ago

0.4.1

10 years ago

0.4.0

10 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.0

10 years ago