❤Nice Poodle, Mister

npm

log inorsign up
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    dumb-bempublic

    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

    Keywords

    install

    npm i dumb-bem

    Downloadsweekly downloads

    32

    version

    3.2.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar

    Test with RunKit