Simple BEM react components generator
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
src
test
.babelrc
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
README.md
license
package.json
yarn.lock

README.md

Dumb BEM

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

npm Build Status license js-standard-style Managed by Yarn Developed at Wimdu

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