bem-clsx
Simple and fast BEM class names generator with mixin support. Inspired by clsx and bem-cn
- No dependencies.
- Useful for React
- TypeScript definitions.
- Configurable
- Mixins
Installation
$ npm install bem-clsx --save
or
$ yarn add bem-clsx
Usage
const b =
Block
;// => 'block' ;// => 'block block_modifier';// => 'block block_modifier_value';// => 'block mixin';// => 'block block_modifier_value mixin';// => 'block block_modifier_value mixin mix'
Element
;// => 'block__element' ;// => 'block__element block__element_modifier';// => 'block__element block__element_modifier_value';// 'block__element mixin';//=> 'block__element block__element_modifier_value mixin';//=> 'block__element block__element_modifier_value mixin mix'
React example
If props className
is navbar__user-info
and online
is true, the result would be the following HTML:
Some User
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
Now you can use this function in your application. Example:
b'element', , 'mixin', null, false, undefined, 'mix' // => 'ns-block~~element ns-block~~element--modifier-value mixin mix'
Default options
License
The package is available as open source under the terms of the MIT License.