Code Monkey home page Code Monkey logo

maintenance npm travis coverage deps gitter

React ❤️ 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)
        }
    })
]

reBEM's Projects

classname icon classname

:abc: Helpers for composing and parsing BEM classNames

css icon css

:dizzy: BEM syntax for CSS

enzyme icon enzyme

:space_invader: reBEM addons for Enzyme

eslint-config icon eslint-config

:no_pedestrians: Shareable ESLint config for all reBEM modules

rebem-jsx icon rebem-jsx

:symbols: Babel plugin for reBEM jsx transformations

test-utils icon test-utils

:space_invader: reBEM addons for React Test Utilities

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.