dumb-bem
v3.2.0
Published
Simple BEM react components generator
Downloads
15
Readme
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 takesblock
andprops
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