Dumb BEM
Dumb BEM is a simple BEM class name transformation for React components.
Install
npm install --save dumb-bemUsage
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 takesblockandpropsas 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