@digitalentities/react-hook-bem

withBEM()

withBEM() implements the BEM methodology for React.

Installation

Use your favourite manager to install the package:

yarn add react-with-bem

npm install react-with-bem --save

Usage

import { BEM } from "react-with-bem";

// import styles as module (https://github.com/css-modules/css-modules)
import styles from "./App.module.scss";

// render
return (
  // activate BEM and inject styles
  <BEM styles={styles}>
    // set BEM block by using $block
    // output: <main class="app">
    <main $block="app">
      // set a BEM element by using $element
      // output: <div class="app__container">
      <div $element="container">
        // set BEM modifier by using $modifier (multiple modifiers are possible)
        // output:
        // <div class="app__container__click> when  clicked === false
        // <div class="app__container__click app__container__click--hidden"> when clicked === true
        <div
            $element="click"
            $modifier={{
              hidden: clicked,
            }}
        >
            Hello world!
        </div>
      </div>
    </main>
  </BEM>
);

.app {
    background-color: red;

    &__container {
        margin: 0 auto;

        &__click {
            &--hidden {
                display: none;
            }
        }
    }
}

Example

You can find a complete example here.