Have ideas to improve npm?Join in the discussion! »

    @igor-gerasimovich/bem-helper
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    Bem helper

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

    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
    param required default type examples
    blockName + + string 'block'
    + + string[] ['block1', 'block2']
    elementDivider - '__' string
    modifierDivider - '--' string
    block

    Returns bem blocks with modifiers

    param required type examples
    modifier - string 'modifier'
    - string[] ['mod1', 'mod2']
    useTheme

    !! this function exists only on ThemedBem

    Set current theme

    param required type examples
    theme - string, undefined 'theme1'
    element

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

    param required type examples
    element + string 'el'
    + string[] ['el1', 'el2']
    modifier - string 'modifier'
    - string[] ['mod1', 'mod2']

    Install

    npm i @igor-gerasimovich/bem-helper

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    23.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar