A helper making it easier to name React components according to BEM convention
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
spec/support
.editorconfig
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
bem-react-helper.js
package.json
tests.js

README.md

BEM React Helper

Travis npm

A helper making it easier to name React components according to BEM convention.

Examples

Before:

export default class Block extends Component {
  render() {
    return (
      <div className={`block ${this.props.visible ? 'block_visible' : ''} ${this.props.type ? `block_type_${this.props.type}` : ''} ${this.props.size ? `block_size_${this.props.size}` : 'block_size_m'} ${this.props.mix}`} />
    );
  }
}

Or:

export default class Block extends Component {
  render() {
    const classes = ['block'];
    
    if (this.props.visible) classes.push('block_visible');
    if (this.props.type) classes.push(`block_type_${this.props.type}`);
    if (this.props.size) {
      classes.push(`block_size_${this.props.size}`);
    } else {
      classes.push('block_size_m');
    }
    if (this.props.mix) classes.push(this.props.mix);
    
    return (
      <div className={classes.join(' ')} />
    );
  }
}

With usage like this:

<Block visible={true} type="primary" size="xxl" mix="block2__elem"/>

After:

import b from 'bem-react-helper';

export default class Block extends Component {
  render() {
    return (
      <div className={b('block', this.props, { size: 's' })} />
    );
  }
}

With usage like this:

<Block mods={{visible: true, type: 'primary', size: 'xxl'}} mix="block2__elem"/>

You also can pass mix as an array:

<Block mods={{visible: true, type: 'primary', size: 'xxl'}} mix={['block2__elem', 'block3']}/>

And if you want to use mods or mix in a body of component, or pass other arguments, the best way to do that is:

import b from 'bem-react-helper';

export default class Block extends Component {
  render() {
    const { mix, mods = {}, ...rest } = this.props;
    
    return (
      <div className={b('block', this.props, { size: 's' })} {...rest}>
        {
          mods.type === 'primary' && (
            <span className="block__star">★</span>
          )
        }
      </div>
    );
  }
}

Why?

Why didn't I use all of others helpers and created yet another one? They bloat code but don't do anything useful. Also I believe that to write plain classes is faster than to use any wrappers around it.

So this helper solves just one problem (the main) — it removes conditions for modifiers and mixes in block's declaration.