@yummies/bem v0.0.5

Install

npm i -S @yummies/bem

Overview

Like BEM methodology and using React? Give @yummies/bem a try:

import { Component } from 'react';
import { render } from 'react-dom';
import BEM from '@yummies/bem';

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

const Beep = React.createFactory(BeepClass);

class BoopClass extends Component {
    render() {
        return BEM({
            block: 'boop',
            mods: this.props.mods,
            mix: this.props.mix,
            props: this.props,
            content: [
                Beep({
                    mix: {
                        block: 'boop',
                        elem: 'oh'
                    },
                    mods: {
                        size: 'xl'
                    }
                }, 'oh'),
                {
                    elem: 'hello',
                    content: 'hello'
                }
            ]
        });
    }
}

const Boop = React.createFactory(BoopClass);

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

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

BEM()

BEM() converts bemjson into React Element. Anything except arrays and plain objects will be returned as is, which means that you can use any mixed content including another React Elements as well.

bemjson

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',
          mods: {
              test: true
          }
      }
    ]
})

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

tag

Default

BEM({})

<div></div>

Custom

BEM({
    tag: 'span'
})

<span></span>

props

Will be transfered as React Props.

References:

• HTML Attributes
• Events System

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

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

content

Anything including arrays, nested bemjson, React Elements, strings, numbers, etc.

Simple

BEM({
    block: 'beep',
    content: [
        {
            block: 'foo'
        },
        {
            block: 'bar'
        }
    ]
})

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

Block context

Block context is preserved so there is no need to specify block every time for nested bemjson.

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

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