@bem-react/classname
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.12 • 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
    
    // 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

    Install

    npm i @bem-react/classname

    DownloadsWeekly Downloads

    7,268

    Version

    1.5.12

    License

    MPL-2.0

    Unpacked Size

    35.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • awinogradov
    • yarastqt
    • tadatuta
    • yeti-or
    • kilyaa
    • sergcen