import bem from 'bem-classnames-maker';
 
// Create a BEM instance with passed block name
const cx = bem('block');
 
cx();                                                     // "block"
cx('', ['mod']);                                          // "block_mod"
cx('', ['mod1', 'mod2']);                                 // "block_mod1 block_mod2"
cx('', { mod1: 'val1', mod2: 'val2' });                   // "block_mod1_value1 block_mod2_value2"
cx('element');                                            // "block__element"
cx('element', ['mod']);                                   // "block__element_mod"
cx('element', ['mod1', 'mod2']);                          // "block__element_mod1 block__element_mod2"
cx('element', { mod1: 'val1', mod2: 'val2' });            // "block__element_mod1_val1 block__element_mod2_val2"
cx('element', { mod1: 'val1', mod2: false, mod3: true }); // "block__element_mod1_val1 block__element_mod3"

const cx = bem('block');
cx('', 'mod');     // "block mod"

const cx = bem('block', {
 
  // delimiter between block and element (by default "__")
  BLOCK_ELEMENT_DELIMITER: '___',
 
  // delimiter between element and modifier (by default "_")
  MOD_DELIMITER: '_',
 
  // delimiter between modifier name and modifier value (by default "_")
  MOD_VALUE_DELIMITER: '-',
 
});

import React from 'react';
import bem from 'bem-classnames-maker';
 
const cx = bem('user');
 
const MyComponent = props => (
  <div className={cx()}>
    <div className={cx('avatar')}>
      <img src="path_to_user_avatar.jpg" />
    </div>
    <div className={cx('name')}>
      John Doe
    </div>
  </div>
);