██████╗ ██╗     ███████╗███╗   ███╗      ██████╗ ███████╗ █████╗  ██████╗████████╗
██╔══██╗██║     ██╔════╝████╗ ████║      ██╔══██╗██╔════╝██╔══██╗██╔════╝╚══██╔══╝
██████╔╝██║     █████╗  ██╔████╔██║█████╗██████╔╝█████╗  ███████║██║        ██║   
██╔══██╗██║     ██╔══╝  ██║╚██╔╝██║╚════╝██╔══██╗██╔══╝  ██╔══██║██║        ██║   
██████╔╝███████╗███████╗██║ ╚═╝ ██║      ██║  ██║███████╗██║  ██║╚██████╗   ██║   
╚═════╝ ╚══════╝╚══════╝╚═╝     ╚═╝      ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝ ╚═════╝   ╚═╝   

blem-react

Use blem with react!

Example usage

import {BlemProvider, withBlem} from 'blem-react'
 
// wrap your component with a withBlem decorator
const MyComponent = withBlem(
  // and use the className that is provided
  (className: c) => (<div className={c}>Cool</div>)
)
// pass in the "base" prop to the BlemProvider
const App = () => (
  <div>
    <BlemProvider base="Base">
      <MyComponent bem="element"/>
      <MyComponent bem={["element", "modifier"]} />
    </BlemProvider>
  </div>
)

The above component would render classnames like so:

<div>
  <div class="Base__element">Cool</div>
  <div class="Base__element--modifier">Cool</div>
</div>

See the tests and the snapshots for more!

Source

https://gitlab.com/brekk/blem-react

This is a work-in-progress module, please feel free to file issues on Gitlab.