https://github.com/agudulin/dumb-bem
Simple BEM react components generator
https://github.com/agudulin/dumb-bem
bem react react-components
Last synced: 5 months ago
JSON representation
Simple BEM react components generator
- Host: GitHub
- URL: https://github.com/agudulin/dumb-bem
- Owner: agudulin
- License: mit
- Created: 2016-02-13T17:49:14.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-07T13:15:24.000Z (over 9 years ago)
- Last Synced: 2025-09-26T18:08:40.423Z (9 months ago)
- Topics: bem, react, react-components
- Language: JavaScript
- Size: 150 KB
- Stars: 33
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: license
Awesome Lists containing this project
README
# Dumb BEM
**Dumb BEM** is a simple BEM class name [transformation](https://github.com/robinpokorny/transform-props-with) for React components.
[](https://www.npmjs.com/package/dumb-bem)
[](https://travis-ci.org/agudulin/dumb-bem)
[](https://github.com/agudulin/dumb-bem/blob/master/license)
[](http://standardjs.com/)
[](https://yarnpkg.com/)
[](http://tech.wimdu.com/)
## Install
```sh
npm install --save dumb-bem
```
## Usage
```js
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(
Lorem Ipsum
, node)
// Would render:
//
//
// Lorem Ipsum
//
//
```
## 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](https://www.npmjs.com/package/classnames) input. E.g. [it can be a string, array of string or object](https://github.com/JedWatson/classnames#usage).
- [`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](docs/plugins.md).
#### Returns
A function which takes `props` object as a parameter, transforms `className` prop on execution and returns back changed props object.
```js
(props) => ({
...props,
className: classNameModifiedByMakers
})
```
#### Examples
**Use built-in maker function**
```js
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(
Item 1
Item 2
Item 3
Item 4
, node)
// Would render:
//
- Item 1
- Item 2
- Item 3
- Item 4
//
//
//
//
//
```
**Use custom maker function**
```js
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(
Item 1
Item 2
, node)
// Would render:
//
- Item 1
- Item 2
//
//
//
```
### [Built-in Plugins](docs/plugins.md)
## License
MIT © [Alexander Gudulin](http://gudulin.com)
[travis-url]: https://travis-ci.org/agudulin/dumb-bem
[travis-image]: https://travis-ci.org/agudulin/dumb-bem.svg?branch=master