README
babel-plugin-react-bemed
Bemed react jsx plugin for Babel.
Example
In
'use strict';
const React = require('react');
const ReactDOM = require('react-dom');
class MyBlock extends React.Component {
render() {
<div bBlock>
<div bElem='first'>first</div>
<div bElem='second' mMods={{size: 'large'}}>
<span bElem='third' className="custom">third</span>
</div>
</div>
}
}
Rendered in browser
<div class="my-block" data-reactid=".0">
<div class="my-block__first" data-reactid=".0.0">first</div>
<div class="my-block__second block__second_size_large" data-reactid=".0.1">
<div class="my-block__third custom" data-reactid=".0.1.0"></div>
</div>
</div>
How does it works?
Build step:
- Plugin analyzes your code
- It finds component name
- Convert CamelCase to dashes
- Changes
bBlock
andbElem
props with block name - Adds
bReact
methods to build file.
Runtime:
bReact.createElement
concats blockName, elemName, mods, className and set it to className.
Installation
$ npm install babel-plugin-react-bemed
Usage
.babelrc
(Recommended)
Via .babelrc
{
"plugins": ["react-bemed"],
"jsxPragma": "bReact.createElement"
}
Via CLI
$ babel --plugins react-bemed --jsxPragma bReact.createElement script.js
Via Node API
require('babel').transform('code', {
plugins: ['react-bemed'],
jsxPragma: 'bReact.createElement'
});
Options
You can set options in .babelrc
.
Defaults:
{
"extra": {
"react-bemed": {
"elemDelim": "__",
"modDelim": "_",
"bevis": false
}
}
}
Bevis mod generates className without repeating block/element name like block__elem _modName_modVal
instead of block__elem block__elem_modName_modVal
.