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 = require('bem-classnames');
cx();
Simple
var classes = {
name: 'button',
modifiers: ['color', 'block'],
states: ['disabled']
};
cx(classes, { color: 'green', block: true });
cx(classes, { disabled: true });
cx(classes, 'a b', ['c', 'd']);
Custom prefix
cx.prefixes.modifiers = '-';
cx(classes, { color: 'green' });
cx.prefixes.foo = 'foo-';
classes.foo = ['a', 'b'];
cx(classes, { a: true, b: true });
with React and ES6
import React from 'react';
import cx from 'bem-classnames';
class Button extends React.Component {
render() {
let classes = {
name: 'button',
modifiers: ['color', 'size'],
states: ['disabled']
};
return (
<button className={cx(classes, this.props, this.props.className)}>
{this.props.children}
</button>
);
}
}
React.render(
<Button color="green" size="xl" disabled={true} className="a b">Alo!</Button>,
document.getElementById('example')
);
for manage the elements of BEM
class Button extends React.Component {
render() {
let classes = {
button: {
name: 'button',
modifiers: ['color', 'size'],
states: ['disabled']
},
button__inner: {
name: 'button__inner',
modifiers: ['align']
}
};
return (
<button className={cx(classes.button, this.props, this.props.className)}>
<span className={cx(classes.button__inner, this.props)}>
{this.props.children}
</span>
</button>
);
}
}
React.render(
<Button color="green" align="center">Alo!</Button>,
document.getElementById('example')
);