Narcoleptic Possum Mob

    module-clsx
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    module-clsx

    Simple and fast BEM class names helper for CSS Modules. Inspired by clsx and bem-cn

    Installation

    $ npm install module-clsx --save
    

    or

    $ yarn add module-clsx
    

    Usage

    .element {
        &_modifier {
            disaply: block;
        }
        &_modifier_value {
            display: flex;
        }
    }
    import block from 'module-clsx'
    import styles from './Component.module.scss'
    
    const b = block(styles)

    Element

    b('element');
    // => 'element_HASH' 
    b('element', { modifier: true });
    // => 'element_HASH element_modifier_HASH'
    b('element', { modifier: 'value' });
    // => 'element_HASH element_modifier_value_HASH'
    b('element', 'mixin');
    // 'element_HASH mixin'
    b('element', { modifier: 'value' }, 'mixin');
    //=> 'element_HASH element_modifier_value_HASH mixin'
    b('element', { modifier: 'value' }, 'mixin', null, false, undefined, 'mix');
    //=> 'element_HASH element_modifier_value_HASH mixin mix'

    React example

    import React from 'react'
    import block from 'bem-clsx'
    import styles from './UserInfo.module.scss'
    
    interface IProps {
      userName: string
      avatarUrl: string
      online: boolean
      className?: string
    }
    
    const b = block(styles)
    
    const UserInfo: React.FC<IProps> = ({
      className,
      userName,
      avatarUrl,
      online
     }) => (
       <div className={b('root', className)}>
         <img className={b('avatar')} src={avatarUrl}/>
         <span className={b('name', { active: online })}>{userName}<span>
         <div className={b('status', { online })}/>
       </div>
     )

    If props className is user-info and online is true, the result would be the following HTML:

    <div class="root_HASH user-info">
      <img class="avatar_HASH" src="https://images.com/test" />
      <span class="name_HASH name_active_HASH">Some User</span>
      <div class="status_HASH status_online_HASH" />
    </div>

    Custom separators

    For using custom element and modifier separators, you can easily create your own module that calls the original with configuration options:

    // ./src/helpers/bem.ts
    import block from 'module-clsx'
    
    const  customConfig  = {
      modifierSeparator: '--',
      modifierValueSeparator: '-',
    }
    
    const customBlock = (styles: {[key: string]: string}) => (
      block(styles, customConfig)
    )
    
    export default customBlock

    Now you can use this function in your application. Example:

    import block from 'helpers/bem'
    import styles from './Component.module.scss'
    
    const b = block(styles)
    
    b('element', { modifier: 'value' }, 'mixin', null, false, undefined, 'mix') 
    // => 'element_HASH element--modifier-value_HASH mixin mix'

    Default options

    {
      modifierSeparator: '_',
      modifierValueSeparator: '_',
    }

    License

    The package is available as open source under the terms of the MIT License.

    Install

    npm i module-clsx

    DownloadsWeekly Downloads

    48

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    7.24 kB

    Total Files

    5

    Last publish

    Collaborators

    • shredder