Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Simple BEM react components generator

Topics

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.