@ljn/bem-react-classname

BEM React ClassName

Usage no npm install needed!

<script type="module">
  import ljnBemReactClassname from 'https://cdn.skypack.dev/@ljn/bem-react-classname';
</script>

README

@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({ fur: ['short', 'black'] }) // Cat Cat_fur_short Cat_fur_black

cat('Tail') // Cat-Tail
cat('Tail', { length: 'small' }) // Cat-Tail Cat-Tail_length_small
cat('Body', { fur: ['short', 'black'] }) // Cat-Body Cat-Body_fur_short Cat-Body_fur_black

const dogPaw = cn('Dog', 'Paw')

dogPaw() // Dog-Paw
dogPaw({ color: 'black', exists: true }) // Dog-Paw Dog-Paw_color_black Dog-Paw_exists

// mixes

cat(null, ['Dog']) // Cat Dog
cat({ size: 'm' }, ['Dog', 'Horse']) // Cat Cat_size_m Dog Horse

cat('Tail', [dogPaw()]) // Cat-Tail Dog-Paw
cat('Tail', { length: 'small' }, [dogPaw({ color: 'black' })]) // Cat-Tail Cat-Tail_length_small Dog-Paw Dog-Paw_color_black

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