Components library for develop with React and BEM methodology
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.bem/templates
.jest
blocks
.babelrc
.bemrc.js
.editorconfig
.eslintignore
.eslintrc
.gitignore
.travis.yml
CONTRIBUTING.md
CONTRIBUTING.ru.md
LICENSE.txt
README.md
README.ru.md
package-lock.json
package.json
webpack.config.js
yarn.lock

README.md

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.