Skip to content

Components library for develop with React and BEM methodology

License

Notifications You must be signed in to change notification settings

bem/bem-react-components

Repository files navigation

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

Build

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

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

License

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

About

Components library for develop with React and BEM methodology

Resources

License

Stars

Watchers

Forks

Packages

No packages published