bemfy

bemfy

A stupid simple BEM compose helper to keep your HTML clean.

• Works with any library/framework.
• Add and remove independent class names with truthy or falsy value.
• Fast!
• Ridiculously tiny at less 500B.
• No deps

Install

npm install --save bemfy

Usage

import React from 'react';
import bemfy, { c } from 'bemfy'

const Component = () => {
  const b = bemfy("custom-button");

  return <div className={b('wrapper')}>
    <div className={b('text', 'white')}>The lazy cat jumps over dizzy fox</div>
    <button className={b('button', 'primary')}>Jump!</button>
  </div>
}

export default Component;

This will render:

<div class="custom-button__wrapper">
  <div class="custom-button__text--white">The lazy cat jumps over dizzy fox</div>
  <button class="custom-button__button--primary">Jump!</button>
</div>

License

MIT © Eduardo Borges