@igor-gerasimovich/bem-helper v1.0.2

Bem helper

Simple class for automatically block__element--modifier and theme__block__element--modifier generation

• Installation
• Examples
  • Native
  • Native themed
  • React
  • React themed
• Info

Installation

npm i @igor-gerasimovich/bem-helper

Examples

Example native

const bem = new Bem('button');

// "block block--modifier"
const blockName = bem.block('modifier');

// "block block--modifier1 block--modifier2"
const blockName = bem.block(['modifier1', 'modifier2']);

// "block__element block__element--modifier"
const elementName = bem.element('element', 'modifier');

// "block__element block__element--modifier1 block__element--modifier2"
const elementName = bem.element('element', ['modifier1', 'modifier2']);

Example react

const bem = new Bem('button');

class Button extends React.Component {
  render() {
    return (
      <div className={bem.block('modifier1')}>
        <button className={bem.element('native', 'modifier2')}>
          {this.props.children}
        </button>
      </div>
    );
  }
}

<div class="button button--modifier1">
  <button class="button__native button__native--modifier2"></button>
</div>

Example themed native

const bem = new ThemedBem('button');
bem.useTheme('theme1');

// "button theme1__button button--mod theme1__button--mod"
bem.block('mod1');

// "button__el theme1__button__el button__el--mod theme1__button__el--mod"
bem.element('el', 'mod1');


bem.useTheme('theme2');

// "button theme2__button button--mod theme2__button--mod"
bem.block('mod1');

// "button__el theme2__button__el button__el--mod theme2__button__el--mod"
bem.element('el', 'mod1');

Example themed react

const bem = new ThemedBem('button');

class Button extends React.Component {
  render() {
    bem.useTheme(this.props.theme);

    return (
      <div className={bem.block('modifier1')}>
        <button className={bem.element('native', 'modifier2')}>
          {this.props.children}
        </button>
      </div>
    );
  }
}

<div class="button button--modifier1 theme__button theme__button--modifier1">
  <button class="button__native button__native--modifier2 theme__button__native theme__button__native--modifier2"></button>
</div>

Info

constructor

block

Returns bem blocks with modifiers

useTheme

!! this function exists only on ThemedBem

Set current theme

element

Returns bem elements with modifiers. Course, block classes will not be returned.