bluecore-classnames
Utility to build BEM class names for React components.
Example
;; @ClassNamesComponent { superprops; thisstate = hovered: true; } { return <div className=> <div className=> <div className=> <div className>=</div> </div> </div> ; }
Will be transformed into
div className: 'base', div className: 'base_inner', div className: 'base_inner_first base_inner_first--active' div className: 'base_inner_second base_inner_second--hovered'
It can be very helpfull if you're using less or sass.
If you're using coffeescript:
React = require 'react' ReactDOM require 'bluecore-classnames/index.coffee' ReactComponent : super props @state = hovered: true : -> div className: cx'base' div className: cx'inner' div className: cx'first''active' div className: cx'second'hovered: @statehovered module.exports = MyComponent
How to use
!!! To use es6 decorators you need to compile your code with babel compiler with stage-1 preset enabled.
Just apply ClassNames
decorator to your React class.
To apply decorator to coffeescript class like in the example, you need to rename render
method to _render
.
ClassNames
decorator accept className in format
className: ?<String>, additional className
element: <String>, name of your element
modifiers: ?<[String] || Object>, where object key is modifier name
cx
has the following declaration:
cx(element: <String>, modifiers: ?<Array, Object>)
Also you can set default values for compiler:
;Compiler;
If decorator found className
s with <string>
type it treats them as usual classNames.
;Compiler;
will make compiler to treat string classNames as element, so code below will work too:
<div className='base'> <div className='inner'> <div className=> <div className>=</div> </div></div>
or you can pass config directly to decorator:
@Component ...