2.0.4 • Published 2 years ago

@digitalentities/react-hook-bem v2.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

Authors

2.0.3

2 years ago

2.0.4

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.16

2 years ago

1.0.6

2 years ago

2.0.2

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.0.5

2 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago