https://github.com/smacker/babel-plugin-react-bemed
Bemed react jsx plugin for Babel
https://github.com/smacker/babel-plugin-react-bemed
Last synced: 6 days ago
JSON representation
Bemed react jsx plugin for Babel
- Host: GitHub
- URL: https://github.com/smacker/babel-plugin-react-bemed
- Owner: smacker
- Created: 2015-10-18T00:43:21.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-11T19:51:47.000Z (over 10 years ago)
- Last Synced: 2025-10-08T08:11:43.339Z (9 months ago)
- Language: JavaScript
- Size: 137 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-plugin-react-bemed
Bemed react jsx plugin for Babel.
## Example
**In**
```jsx
'use strict';
const React = require('react');
const ReactDOM = require('react-dom');
class MyBlock extends React.Component {
render() {
first
third
}
}
```
**Rendered in browser**
```html
first
```
## How does it works?
Build step:
1. Plugin analyzes your code
2. It finds component name
3. Convert CamelCase to dashes
4. Changes `bBlock` and `bElem` props with block name
5. Adds `bReact` methods to build file.
Runtime:
`bReact.createElement` concats blockName, elemName, mods, className and set it to className.
## Installation
```sh
$ npm install babel-plugin-react-bemed
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["react-bemed"],
"jsxPragma": "bReact.createElement"
}
```
### Via CLI
```sh
$ babel --plugins react-bemed --jsxPragma bReact.createElement script.js
```
### Via Node API
```javascript
require('babel').transform('code', {
plugins: ['react-bemed'],
jsxPragma: 'bReact.createElement'
});
```
## Options
You can set options in `.babelrc`.
Defaults:
```json
{
"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`.