@shelf/bem
v5.0.0Shelf/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
npm i @shelf/bem
Metadata
- MIT
- >=14
- Vlad Holubiev
- released 12/8/2023
Downloads
Maintainers
kateryna-kochina, maksym.tarnavskyi, andrii-nastenko, d-mii-, mykhailo.yatsko, ahavrysh, nikita_shelf, maciej.orlowski, monopotan, andrew214, bogdan.kolesnyk, andrii.batutin, kristina.zhak, anton-russo, mmazurowski, toms-shelf, mateuszgajdashelf, kchlon, dmytro.harazdovskiy, duch0416, i5adovyi, olesiamuller, mykola.khytra, yuliiakovalchuk, el_scrambone, bodyaflesh, slavammellnikov, andriisermiahin, mpushkin, batovpavlo, domovoj, vozemer, oleksii.dymnich, dima-bond, maksym.hayovets, oles.zadorozhnyy, ss1l, gemshelf, hartzler, vladgolubev, marianna-milovanova, hmelenok, knupman, maaraanas, terret, chapelskyi.slavik, pihorb, irynah, diana.kryskuv, andy.raven, rafler, sskalp88, demiansua, yuriil, ktv18, drews_abuse, rostyslav-horytskyi, whodeen,