BEM-class Generator for React

bemnames.js

import classNames from 'classnames';

// modName -> mod_name
function toKebabCase(str) {
  return str ? str.replace(/[A-Z]/g, function(s) {return '-' + s.toLowerCase() }).replace(/$\-/, '') : '';
}

function BEM(blockName) {
  blockName = blockName || '';

  function block(newBlockName, mods = [], ...classes) {
    if (typeof newBlockName === 'string') {
      blockName = newBlockName;
    }

    let blockClass = blockName;

    if (mods) {
      mods = classNames(mods).split(' ').filter( mod => mod ).map( mod => {
        return blockClass + '--' + toKebabCase(mod);
      }).join(' ');
    }

    return { className: [blockClass, mods, classNames(classes)].join(' ').trim() };
  }

  function elem(elemName, mods = [], ...classes) {
    let elemClass = blockName + '__' + elemName;

    if (mods) {
      mods = classNames(mods).split(' ').filter( mod => mod ).map( mod => {
        return elemClass + '--' + toKebabCase(mod);
      }).join(' ');
    }

    return { className: [elemClass, mods, classNames(classes)].join(' ').trim() };
  };

  return { block, elem };
}

export default BEM;