babel-plugin-transform-bem-jsx
v1.5.14
Published
Babel plugin to replace BEM attributes in JSX Opening elements with className or inline style concatination
Downloads
24
Maintainers
Readme
babel-plugin-transform-bem-jsx
Transform BEM attributes (b,e,m) into concatenated classNames or inline styles!
This plugin is designed to use with Babel 6.
Modes
- Class Names Before/After Instalation Usage
- Inline Styles Before/After — Instalation — Usage
Class Names
This is the common mode of this plugin — just for classnames concatenation by BEM attributes.
class Map {
render() {
const {
countries,
points,
} = this.props;
const countryNode = (
<div e='country' />
);
const countriesNodes = countries
.map((country) => (
<div e='country'>
{countryNode}
</div>
));
return (
<div b='Map'>
<div e='countries'>
{countriesNodes}
</div>
<div e='points'>
{points.map((point) => {
const flagNode = (
<div e='flag' />
);
return (
<div e='point'>
{flagNode}
{
point.name
?
<span e='name'>
{point.name}
</span>
:
null
}
</div>
)
})}
</div>
</div>
)
}
}
For classNames
Install plugin and save it to the devDependencies
:
npm install --save-dev babel-plugin-transform-bem-jsx