ClassName ·
![npm bundle size (minified + gzip)](/web/20230128015335im_/https://en.bem.info/ac6BnASkVMDKVafIXC2hI6uaZaI.svg)
Tiny helper for building CSS classes with BEM methodology.
Install
npm i -S @bem-react/classname
Usage
import { cn } from '@bem-react/classname';
const cat = cn('Cat');
cat(); // Cat
cat({ size: 'm' }); // Cat Cat_size_m
cat('Tail'); // Cat-Tail
cat('Tail', { length: 'small' }); // Cat-Tail Cat-Tail_length_small
const dogPaw = cn('Dog', 'Paw');
dogPaw(); // Dog-Paw
dogPaw({ color: 'black', exists: true }); // Dog-Paw Dog-Paw_color_black Dog-Paw_exists
classnames merge
import { classnames } from '@bem-react/classname';
classnames('Block', 'Mix', undefined, 'Block'); // 'Block Mix'
Configure
By default classname
uses React naming preset. But it's possible to use any.
import { withNaming } from '@bem-react/classname';
const cn = withNaming({ n: 'ns-', e: '__', m: '_' });
cn('block', 'elem')({ theme: 'default' }); // ns-block__elem_theme_default