bem-react-mixin v1.2.4

README

In React JS, the recommended way to style components is to add styles at the Component level with Javascript instructions.

This module is not good for that, it only helps you to implement the CSS BEM Classification way with your React Components.

It uses the "classnames" Module (https://github.com/JedWatson/classnames) to do the job.

BEM Css ClassNames are of the form :

  the-block__the-element--the-modifier
  |       |  |         |  |          |
  +-------+  +---------+  +----------+
    BLOCK      ELEMENT      MODIFIER

in fact, we are more in a BCM case :

  the-block__the-component--the-modifier
  |       |  |           |  |          |
  +-------+  +-----------+  +----------+
    BLOCK   REACT-COMPONENT   MODIFIER

This mixins changes host component only by adding the "bem" property and some Context and by initializing it in componentWillMount.

This mixin should not be used before the componentWillMount call

Usage :

=> in Top Parent Component define the block part in the mixins component property:

     mixins: [bem.bemInit('the-app-name')]

=> in the Child Components, add the bem mixin :

     mixins: [bem]

    -> and use the added "this.bem" property in the "className" attribute

     Call method : this.bem[.add(...)|.raw(...)...].render()
     to render bem oriented css classNames.

     Note : the property is also available in the Top Parent Component.

Minimal sample :

     <div className={this.bem.render()} />

     if the component displayName is "CarouselItem" and the top parent component
     defines the mixin as : mixins: [bem.bemInit('the-app-name')], then, the class name
     produced should be :

     <div class="the-app-name__carousel-item" />


Minimal sample mixed with non bem class :

     className={this.bem.raw('panel').add().render()}

     this should produce the class names : "panel the-app-name__carousel-item"

Complete Sample with conditional classes :

     className={this.bem.add('img').
             add('img').mod('selected').if(this.state.isBeingDragged).
             add('img').mod('drag-over').if(this.props.dragOverIndex === this.props.contentIndex).
             render()}

  if conditions are true, the complete sample should produce with block prefix "the-app-name"
  and, with a component displayName "CarouselItem", it should produce class names :

    the-app-name__carousel-item-img
    the-app-name__carousel-item-img--selected
    the-app-name__carousel-item-img--drag-over

Tests :

  type the command line "jest" to play test suite.

How do I get set up?

just add this module into your project :

  npm install --save bem-react-mixin

in the source code import the module :

  var bem = require ('bem-react-mixin');
  

add the mixin in a top or macro component :

  mixins: [..., bem.bemInit('the-block-name')]
    

add the mixin in child or sub-child component :

  mixins: [..., bem]
      

use it in the top/child component :

  this.bem.add('icon')
     .add('icon').mod('connected').if(this.props.isConnected)
     .render();

here is a minimal parent component sample :

  var React             = require('react'),
      bem = require('bem-react-mixin');

  var MainPanel = React.createClass({
      mixins: [bem.bemInit('App')],
      propTypes: {
          name: React.PropTypes.string
      },
      getDefaultProps() {

          return {
              name: 'world'
          };
      },
      _renderClassName() {
          return this.bem
              .add()
              .render();
      },
      render() {

          return (
              <div className={this._renderClassName()}>
                  <h4>Hello {this.props.name} !</h4>
              </div>
          );
      }
  });

  module.exports = MainPanel;

this sample should render :

  <div class="app__main-panel" data-reactid=".0.0">
     <h4 data-reactid=".0.0.0">
        ...
     
     </h4>
  </div>