1.6.0 • Published 1 year ago
@bem-react/classname v1.6.0
@bem-react/classname ·
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
// 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
1.6.0
1 year ago
1.5.13-dev.19
1 year ago
1.5.12
3 years ago
1.5.11
3 years ago
1.5.10
3 years ago
1.5.9
3 years ago
1.5.8
4 years ago
1.5.7
4 years ago
1.5.6
5 years ago
1.5.5
5 years ago
1.5.4
5 years ago
1.5.3
5 years ago
1.5.2
5 years ago
1.5.1
5 years ago
1.5.0
5 years ago
1.4.4
5 years ago
1.4.3
5 years ago
1.4.2
5 years ago
1.4.1
5 years ago
1.4.0
5 years ago
1.3.2
5 years ago
1.3.2-dev.553
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.1-dev.546
5 years ago
1.2.0
5 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.0
6 years ago
0.3.2
6 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago