react-bem-builder

React and BEM.

Installation

$ yarn add react-bem-builder
 
or
 
$ npm i react-bem-builder

Usage

import bemClassnames from 'react-bem-builder';

const c = bemClassnames('hoge');
// hoge
 
cn('item');
// hoge__item
 
------
 
const a = bemClassnames('hoge', { me: false });
// hoge
 
const b = bemClassnames('hoge', [ 'me' ]);
// hoge hoge--me
 
a('item');
// hoge__item
 
a('item', { selected: true });
// hoge__item--selected
 
b('item');
// hoge__item hoge--me__item
 
b('item', [ 'selected' ]);
// hoge__item hoge__item--selected hoge--me__item hoge--me__item--selected
 

Use with React

import bemClassnames from 'react-bem-builder';
 
const cn = bemClassnames('list');
 
const List = props => {
  return (
    <div className={cn()}>
      <h1 className={cn('title')}>list</h1>
      <ul>
        <li className={cn('item', { selected: true })}>1</li>
        <li className={cn('item', 'hoge', { selected: false })}>2</li>
        <li className={cn('item', 'hoge', [ 'selected' ])}>3</li>
      </ul>
    </div>
  )
};
 

HTML

<div class="list">
  <h1 class="list__title">list</h1>
  <ul>
    <li class="list__item list__item--selected">1</li>
    <li class="list__item list__hoge">2</li>
    <li class="list__item list__hoge list__item--selected list__hoge--selected">3</li>
  </ul>
</div>

License

MIT