Nocturnal Programmer's Machine
Miss any of our Open RFC calls?Watch the recordings here! »

@bem-react/classname

1.5.8 • Public • Published

@bem-react/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

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: '_', v: '_' })
 
cn('block', 'elem')({ theme: 'default' }) // ns-block__elem_theme_default

Install

npm i @bem-react/classname

DownloadsWeekly Downloads

2,740

Version

1.5.8

License

MPL-2.0

Unpacked Size

34.1 kB

Total Files

8

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar