@digitalentities/react-hook-bem NPM

react-hook-bem

A React library implementing the BEM concept for Sass.

Features

Complete implementation of BEM concept including blocks, elements and modifiers.
Provides easy to use style injection
Provides easy to use DOM elements prefixed by $
Wrapper to integrate your own components
Warning in developer console when class is missing

Installation

yarn add @digitalentities/react-hook-bem

#or

npm install @digitalentities/react-hook-bem

Basic usage

/*
* Component.tsx
*/

// All DOM elements are prefixed by $
import { $div, $main, Styles } from "@digitalentities/react-hook-bem";

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

// ...

return (
  // inject styles
  <Styles value={styles}>
    // define a BEM block by using $block
    // output: <main class="app">
    <$main $block="app">
      // define a BEM element by using $element
      // output: <div class="app__container">
      <$div $element="container">
        // use a 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>
  </Styles>
);

/*
* App.module.scss
*/

.app {
  background-color: red;

  &__container {
    margin: 0 auto;

    &__click {
      /*! keep - so scss compiles empty class */

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

Advanced usage

You can wrap your own components with the provided withBEM wrapper:

import { YourComponent } from "./YourComponent";
import { withBEM } from "react-hooks-bem";

export const $YourComponent = withBEM(YourComponent);

Example

You can find a complete example in ./example.

Development

# Step 1:
# in project root
yarn install

# Step 2:
# in project root
cd example

yarn install

# Step 3:
# in project root
# See: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
cd example/node_modules/react

yarn link

# in project root
yarn link "react"

# Step 4
# Build library
# in project root
yarn build

# Step 5
# Start example app
cd example

yarn start