bem-classnames
JavaScript and Sass utilities to manage BEM class names
npm:
npm install @helioscompanies/bem-classnamesYarn (note that yarn add automatically saves the package to the dependencies in package.json):
yarn add @helioscompanies/bem-classnamesUsage
JavaScript
// file: bem-config.js
import { kebabCase } from "lodash";
import { ReactHelper } from "@helioscompanies/bem-classnames";
export default new ReactHelper({ blockFormatter: (name) => `my-${name}`, formatter: kebabCase });// file: FooBar.js
import bem from "bem-config";
import React, { Component } from "react";
import "FooBar.scss";
class FooBar extends Component {
render() {
return (
<div className={ bem.block(this) }>
<div className={ bem.element(this, "inner") } />
</div>
);
}
}
FooBar.className = 'FooBar';
render(<FooBar className="test" />, document.getElementById("test"));
// <div class="my-foo-bar test">
// <div class="my-foo-bar__inner" />
// </div>Scss
// file: bem-config.scss
@import "~sassdash/index";
@import "~@helioscompanies/bem-classnames/index";
@function -my-bem-block-formatter($name) {
@return "my-#{ $name }";
}
$-my-bem-config: bem-config((
formatter: get-function(_kebab-case),
block-formatter: get-function(-my-bem-block-formatter)
)) !default;// file: FooBar.scss
@import "bem-config.scss";
#{ bem-block(FooBar, null, test) } {
// ...
}
#{ bem-block(FooBar, ted, test) } {
// ...
}
#{ bem-element(FooBar, inner) } {
// ...
}
// .my-foo-bar.test {}
// .my-foo-bar.my-foo-bar_ted.test {}
// .my-foo-bar__inner {}