@shelf/bem
TypeScript icon, indicating that this package has built-in type declarations

5.0.0 • Public • Published

Shelf/bem CircleCI

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

/@shelf/bem/

    Package Sidebar

    Install

    npm i @shelf/bem

    Weekly Downloads

    1,126

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    8.71 kB

    Total Files

    10

    Last publish

    Collaborators

    • vladmarchuk
    • vadymaslovskyi
    • andrew_batutin
    • marianna-milovanova
    • petro.bodnarchuk
    • kateryna-kochina
    • maksym.tarnavskyi
    • andrii-nastenko
    • mykhailo.yatsko
    • ahavrysh
    • nikita_shelf
    • maciej.orlowski
    • monopotan
    • andrew214
    • bogdan.kolesnyk
    • andrii.batutin
    • kristina.zhak
    • anton-russo
    • mmazurowski
    • mateuszgajdashelf
    • kchlon
    • dmytro.harazdovskiy
    • duch0416
    • i5adovyi
    • olesiamuller
    • mykola.khytra
    • yuliiakovalchuk
    • el_scrambone
    • bodyaflesh
    • andriisermiahin
    • mpushkin
    • batovpavlo
    • domovoj
    • vozemer
    • oleksii.dymnich
    • dima-bond
    • maksym.hayovets
    • oles.zadorozhnyy
    • ss1l
    • gemshelf
    • hartzler
    • vladgolubev
    • hmelenok
    • knupman
    • maaraanas
    • terret
    • chapelskyi.slavik
    • pihorb
    • irynah
    • diana.kryskuv
    • andy.raven
    • rafler
    • sskalp88
    • demiansua
    • yuriil
    • ktv18
    • drews_abuse
    • rostyslav-horytskyi
    • whodeen