bem-classnames
bem-classnames is a simple utility to manage BEM class names on React.
Inspired by classnames.
npm install bem-classnames
Usage
var cx = ;;
Simple
var classes =name: 'button'modifiers: 'color' 'block'states: 'disabled';; // "button button--green button--block"; // "button is-disabled"; // "button a b c d"
Custom prefix
// Default prefixes://// cx.prefixes = {// modifiers: '{name}--',// states: 'is-'// };cxprefixesmodifiers = '-';; // "button -green"// You can add the prefixescxprefixesfoo = 'foo-';classesfoo = 'a' 'b';; // "button foo-a foo-b"
with React and ES6
;;Component{let classes =name: 'button'modifiers: 'color' 'size'states: 'disabled';return<button className=>thispropschildren</button>;}React;// "button button--green button--xl a b is-disabled"
for manage the elements of BEM
Component{let classes =button:name: 'button'modifiers: 'color' 'size'states: 'disabled'button__inner:name: 'button__inner'modifiers: 'align';return<button className=><span className=>thispropschildren</span></button>;}React;// button -> "button button--green"// span -> "button__inner button__inner--center"