There are two ways to use rebem — with jsx (a separate babel plugin) and without it (out of the box), like this:
import { Component } from 'react';
import { render } from 'react-dom';
import { BEM } from 'rebem';
class BeepClass extends Component {
render() {
return BEM(
{
...this.props,
block: 'beep',
tag: 'span',
mods: {
type: 'simple',
...this.props.mods
}
},
this.props.children
);
}
}
const Beep = React.createFactory(BeepClass);
class BoopClass extends Component {
render() {
return BEM(
{
...this.props,
block: 'boop'
},
Beep(
{
mix: {
block: 'boop',
elem: 'hello'
},
mods: {
size: 'xl'
}
},
'hello'
)
);
}
}
const Boop = React.createFactory(BoopClass);
render(
Boop({
mods: {
disabled: true
}
}),
document.body
);<div class="boop boop_disabled">
<span class="beep beep_type_simple beep_size_xl boop__hello">hello</div>
</div>npm i -S rebem
BEM(props, ...children)is almost the same as
React.createElement(tag/ReactClass, props, ...children)but tag and props.className are made from special props:
BEM({
block: 'beep'
})<div class="beep"></div>BEM({
block: 'beep',
elem: 'boop'
})<div class="beep__boop"></div>BEM({
block: 'beep',
mods: {
foo: 'bar'
}
})<div class="beep beep_foo_bar"></div>BEM({
block: 'beep',
mods: {
foo: true,
bar: false
}
})<div class="beep beep_foo"></div>BEM({
block: 'beep',
elem: 'boop',
mods: {
foo: 'bar'
}
})<div class="beep__boop beep__boop_foo_bar"></div>BEM({
block: 'beep',
mix: {
block: 'boop',
elem: 'foo'
}
})<div class="beep boop__foo"></div>BEM({
block: 'beep',
mix: [
{
block: 'boop',
elem: 'foo'
},
{
block: 'bar',
elem: 'baz',
mods: {
test: true
}
}
]
})<div class="beep boop__foo bar__baz bar__baz_test"></div>div by default.
BEM({
tag: 'span'
})<span></span>If className is specified, it will be preserved along with BEM classNames.
BEM({
block: 'boop',
className: 'beep'
})<div class="boop beep"></div>blockFactory can save you a couple of bytes when you have a lot of BEM-entities in the component:
import React from 'react';
import { render } from 'react-dom';
import { blockFactory } from 'rebem';
const Block = blockFactory('beep');
class Beep extends React.Component {
render() {
return Block(this.props,
Block({ elem: 'hello', mods: { size: 'xl' } },
'hello'
),
Block({ elem: 'jack', mix: { block: 'man' } },
'Jack'
)
);
}
}
render(
React.createElement(Beep),
document.body
);<div class="beep">
<div class="beep__hello beep__hello_size_xl">hello</div>
<div class="beep__jack man">hello</div>
</div>References:
BEM({
block: 'image',
tag: 'img',
src: 'http://funkyimg.com/i/26jtf.gif',
alt: 'kitten'
})<img class="image" src="http://funkyimg.com/i/26jtf.gif" alt="kitten"/>process.env.NODE_ENV must be available. For example in webpack you can do this with DefinePlugin:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent