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"])

	React JSX	HTML produced
Block	<Block />	<div class="Block"></div>
With tag specified	<Block as="span" />	<span class="Block"></span>
Element	<Block.Element />	<div class="Block__Element"></div>
Everything can be an element!	<Block.MillaJovovich />	<div class="Block__MillaJovovich"></div>
Boolean modifier	<Block simple />	<div class="Block Block--simple"></div>
Non-boolean modifier	<Block theme="dark" />	<div class="Block Block--theme_dark"></div>

License

MIT © dmitrykrylov