ReactBEM for Meteor

BEM class names are systematic. So why write them yourself?

Note, as of Meteor 1.3, this will no longer be supported. Please use the original repo: react-bem.

See the Original author

Installation

meteor add capsulecat:react-bem

BEM Class Nmes

React BEM automatically generates BEM style classes for React components because the very nature of BEM makes them systematic.

Documenation

The package gives you a ReactBEM

Example Code

Todo = React.createClass({
    mixins: [ReactBEM],
    bem_blocks: ["widget"],
    bem_block_modifiers: ["test"],
    bem_render: function () {
        return (
          <div role="introduction">
            <p>Hello</p>
          </div>
        );
    }
});

Which will output:

<div class="widget--test__introduction widget__introduction" data-reactid=".0">
    <p class="widget--test__p widget__p" data-reactid=".0.0.0">Hello</p>
</div>

Running Tests

Tests use Mocha. You can run tests completely from the command line:

VELOCITY_TEST_PACKAGES=1 meteor test-packages --driver-package velocity:html-reporter --velocity ./