agudulin/dumb-bem

Simple BEM react components generator

Dumb BEM

Dumb BEM is a simple BEM class name transformation for React components.

Install

npm install --save dumb-bem

Usage

import dumbBem from 'dumb-bem'
import tx from 'transform-props-with'

const dumbHeader = dumbBem('header')
const Header = tx(dumbHeader)('div')
const HeaderTitle = tx([{ element: 'title' }, dumbHeader])('h1')

ReactDOM.render(
  <Header modifier='landing'>
    <HeaderTitle>Lorem Ipsum</HeaderTitle>
  </Header>
, node)
// Would render:
// <div className='header header--landing'>
//   <h1 className='header__title'>
//     Lorem Ipsum
//   </h1>
// </div>

API

dumbBem(block, options={})

Arguments

• block (String): name of the base block.
• options (Object): Override default options.

  • [plugins] (Array): array of plugins for modifying class names.

    Plugin is an object with two properties:

    • maker (function) Maker function takes block and props as arguments and should return anything suitable for classnames input. E.g. it can be a string, array of string or object.
    • [propsToRemove] (Array) An array of properties which are used in the plugin but should not be injected into the corresponding DOM element in the end.

    See also built-in makers.

Returns

A function which takes props object as a parameter, transforms className prop on execution and returns back changed props object.

(props) => ({
  ...props,
  className: classNameModifiedByMakers
})

Examples

Use built-in maker function

import dumbBem from 'dumb-bem'
import { makeStates } from 'dumb-bem/lib/plugins'
import tx from 'transform-props-with'

const dumbList = dumbBem('list', { plugins: [makeStates] })
const List = tx(dumbList)('ul')
const ListItem = tx([{ element: 'item' }, dumbList])('li')

ReactDOM.render(
  <List>
    <ListItem active={true}>Item 1</ListItem>
    <ListItem disabled={true}>Item 2</ListItem>
    <ListItem hidden={true}>Item 3</ListItem>
    <ListItem loading={true}>Item 4</ListItem>
  </List>
, node)

// Would render:
// <ul class='list'>
//   <li class='list__item is-active'>Item 1</li>
//   <li class='list__item is-disabled'>Item 2</li>
//   <li class='list__item is-hidden'>Item 3</li>
//   <li class='list__item is-loading'>Item 4</li>
// </ul>

Use custom maker function

import dumbBem from 'dumb-bem'
import tx from 'transform-props-with'

const colorModifierPlugin = {
  maker: (block, props) => {
    if (props.color) {
      return `${block}--${props.color}`
    }
  },
  propsToRemove: ['color']
}

const dumbList = dumbBem('list', { plugins: [colorModifierPlugin] })
const List = tx(dumbList)('ul')
const ListItem = tx([{ element: 'item' }, dumbList])('li')

ReactDOM.render(
  <List>
    <ListItem color='black'>Item 1</ListItem>
    <ListItem color='white'>Item 2</ListItem>
  </List>
, node)

// Would render:
// <ul class='list'>
//   <li class='list__item list__item--black'>Item 1</li>
//   <li class='list__item list__item--white'>Item 2</li>
// </ul>

Built-in Plugins

License

MIT © Alexander Gudulin

dumb-bem's Issues

Make block/element/modifier delimiters customisable

We want let people customise delimeters between B/E/M.

E.g. block__elem--mod or block__elem_mod.

Cannot add a ref to a dumbBem component

<MyDiv ref={(el) => (this._myDiv = el)} /> // doesn't work
<div ref={(el) => (this._myDiv = el)} className='my-div' /> //works

Migrate to yarn

why not yo

Make States optional

The state class names like is-hidden are not part of the BEM. Yet, they are applied automatically when a prop with one of these (rather common) names is included.

I propose it is removed from default behaviour. When someone wants to use that they can pass it as an extra maker. It could look like this:

import dumbBem from 'dumb-bem'
import makeStates from 'dumb-bem/makers/makeStates'

const dumbHeader = dumbBem('header', [makeStates])

When this would be desired behavior in a codebase such middle module could be written:

import dumbBem from 'dumb-bem'
import makeStates from 'dumb-bem/makers/makeStates'

export default (block) => dumbBem(block, [makeStates])

The last line could read the following to enable extra makers:

export default (block, extraMakers = [] ) =>
  dumbBem(block, [makeStates].concat(extraMakers))