Shelf/bem
Slim version of bem-cn without mixins, state and other stuff.
Install
$ yarn add @shelf/bem
Usage
import {block} from '@shelf/bem';
const b = block('nav-item');
function NavLink({isActive, href, icon, name}) {
return (
<li className={b({active: isActive})}> // .nav-item .nav-item--active
<Icon icon={icon} className={b('icon')} /> // .nav-item__icon
<a href={href} className={b('link')}> // .nav-item__link
{name}
</a>
</li>
);
}
API
block
You can pass either element or modifiers as a first argument. Modifies can be passed as an array or object.
import {block} from '@shelf/bem';
const b = block('nav-item');
b(); // nav-item
b('link'); // nav-item__link
b(['active']); // nav-item nav-item--active
b({active: true}); // nav-item nav-item--active
Second argument is modifiers & could be combined with element. You can pass them as an array or object.
const isActive = true;
b('link', [isActive && 'active']); // nav-item__link nav-item__link--active
const isSelected = true;
b('link', {selecter: isSelected}); // nav-item__link nav-item__link--selected
setup
You can setup your own delimiters for element and modifier
import {setup} from '@shelf/bem';
const block = setup({el: '_', mod: '-'});
const b = block('nav-item');
b('link'); // nav-item_link
b('link', ['active']); // nav-item_link nav-item_link-active
Additionally you can pass ns
to customize namespace
const block = setup({ns: 'my-app-'});
const b = block('nav-item');
b(); // my-app-nav-item
You can also provide custom classMap to map your class names to bem class names. Helpful when you want to use bem with css modules.
import {setup} from '@shelf/bem';
const block = setup({classMap: {'nav-item__link': 'nav-item__link-13'}});
const b = block('nav-item');
b('link'); // nav-item__link-13
Publish
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
License
MIT © Shelf