Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

@bem-react/classname

1.4.4 • Public • Published

ClassName · npm (scoped) npm bundle size (minified + gzip)

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

install

npm i @bem-react/classname

Downloadsweekly downloads

32,006

version

1.4.4

license

MPL-2.0

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability