https://github.com/morlay/react-bem-render

https://github.com/morlay/react-bem-render

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/morlay/react-bem-render
• Owner: morlay
• Created: 2015-02-17T14:37:05.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-08-14T04:50:30.000Z (almost 11 years ago)
• Last Synced: 2025-04-19T21:54:12.484Z (about 1 year ago)
• Language: JavaScript
• Size: 172 KB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## React Bem Render

just a simple bem render to auto add bem classes in a component.

[![Build Status](https://travis-ci.org/morlay/react-bem-render.svg?branch=master)](https://travis-ci.org/morlay/react-bem-render)

[![Dependencies](https://david-dm.org/morlay/react-bem-render.svg)](https://david-dm.org/morlay/react-bem-render)

## Usage

Use as a mixin:

```js

var ReactBemRender = require('react-bem-render');

var Component = React.createClass({

  mixins: [ReactBemRender],

  $render: function () {

    return (

      

        


        


        

      )

    }

  });

```


this will transform to

```js

  

    


   


  

```


or use decorator

```js

var bemDecorator = require('react-bem-render').bemDecorator;

var Component = React.createClass({

   @bemDecorator

   render: function () {

    return 

   }

});

```

###  Some rules

* when `block` and `elem` be used together, they will be a mix.

* mods will be worked with `block` by default, if no `block`, it will be worked with `elem`.

* for React Component if `block` set, it will render in parent.

more examples, please see the test cases.

### Change Logs

* `0.2.0` update to support React 0.13.x

* `< 0.1.6` only support React 0.12.x