bem-jsx

Integrate BEM into your React app gracefully

Install

npm install --save bem-jsx

Usage

import React from "react"
import block from "bem-jsx"

const Form = block("Form", ["theme", "simple", "disabled"])

const Example = () => (
  <Form as="form" theme="xmas" simple>
    <Form.Input as="input" type="text" />
    <Form.Submit as="input" type="submit" disabled />
  </Form>
)

It will produce the following piece of HTML:

<form class="Form Form--theme_xmas Form--simple">
  <input type="text" class="Form__Input" />
  <input type="submit" disabled class="Form__Submit Form__Submit--disabled" />
</form>

Reference

block function takes 2 arguments:

• blockClassName : string, required
• modifiers : Array<string>, optional
• config : Object, optional

config object reference:

• elementSeparator: string, optional, default: '__'
• modifierSeparator: string, optional, default: '--'
• modifierValueSeparator: string, optional, default: '_'
• kebabCase: string, optional, default: false

Let's create a Block. It can do a lot!

const Block = block("Block", ["theme", "simple", "disabled"])

<Block />

<div class="Block"></div>

<Block as="span" />

<span class="Block"></span>

<Block.Element />

<div class="Block__Element"></div>

<Block.MillaJovovich />

<div class="Block__MillaJovovich"></div>

<Block simple />

<div class="Block Block--simple"></div>

<Block theme="dark" />

<div class="Block Block--theme_dark"></div>

<Block as="button" disabled>Ok<Block>

<button class="Block" disabled>Ok</button>

License

MIT © dmitrykrylov