dumb-bem

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>