bem/bem-react-components

Components library for develop with React and BEM methodology

BEM React Components

bem-react-components is an library that provides a set of visual components build with bem-react-core. React Components are called blocks according to BEM methodology. Check bem-info for deeper dive.

🚧 Hard Work is in Progress 🚧

Blocks

• Attach
• Button
• CheckBox
• CheckBoxGroup
• Dropdown
• Icon
• Image
• KeyCodes
• Link
• Menu
• Modal
• Popup
• ProgressBar
• Radio
• RadioGroup
• Select
• Spin
• TextArea
• TextInput

Build

Right now bem-react-components is heavily relying on assemble, so it's necessary to use one. There are several implementations:

• webpack-bem-loader
• babel-plugin-bem-import

For fast start you could use create-bem-react-app.

Webpack

Example of webpack.conf.js

module: {
  rules: [
    {
      test: /\.(js)$/,
      include: ['./node_modules/bem-react-components', './src'],
      use: [
        {
          loader: 'webpack-bem-loader',
          options: {
            levels: [
              './node_modules/bem-react-components/blocks',
              './src/my-awesome-blocks'
            ],
            techs: ['js', 'css']
          }
        },
        {
          loader: 'babel-loader',
          options: { ... }
        }
      ]
    }
  ]
}

To use more options of bem-loader check docs.

Babel

NB: Babel couldn't build css files, only js and js-like.

Example of .babelrc

{
  "presets": [["es2015", { "loose":true }], "react"],
  "plugins": [
    ["bem-import", {
      "levels": [
        "./node_modules/bem-react-components/blocks",
        "./src/my-awesome-blocks"
      ]
    }]
  ]
}

To use more options of bem-import check docs.

Maintainers

• veged
• awinogradov
• Yeti-or

License

Code and documentation © 2017 YANDEX LLC. Code released under the Mozilla Public License 2.0.