Simple BEM react components generator
JavaScript
Latest commit 3c072e4 Dec 7, 2016 @agudulin 3.2.0
Permalink
Failed to load latest commit information.
docs
src
test move the fxn to a separate file, write a spec Dec 7, 2016
.babelrc init Feb 13, 2016
.editorconfig
.gitignore Introduce src and text directories Apr 15, 2016
.npmignore
.travis.yml
CHANGELOG.md
README.md
license init Feb 13, 2016
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