rebem / rebem Goto Github PK

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
);

BEM(props, ...children)

React.createElement(tag/ReactClass, props, ...children)

BEM({
    block: 'beep'
})

BEM({
    block: 'beep',
    elem: 'boop'
})

BEM({
    block: 'beep',
    mods: {
        foo: 'bar'
    }
})

BEM({
    block: 'beep',
    mods: {
        foo: true,
        bar: false
    }
})

BEM({
    block: 'beep',
    elem: 'boop',
    mods: {
        foo: 'bar'
    }
})

BEM({
    block: 'beep',
    mix: {
        block: 'boop',
        elem: 'foo'
    }
})

BEM({
    block: 'beep',
    mix: [
        {
            block: 'boop',
            elem: 'foo'
        },
        {
            block: 'bar',
            elem: 'baz',
            mods: {
                test: true
            }
        }
    ]
})

BEM({
    tag: 'span'
})

BEM({
    block: 'boop',
    className: 'beep'
})

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
);

BEM({
    block: 'image',
    tag: 'img',
    src: 'http://funkyimg.com/i/26jtf.gif',
    alt: 'kitten'
})

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV)
        }
    })
]