bluecore-classnames

bluecore-classnames

Utility to build BEM class names for React components.

Example

import React from 'react';
import {cx, ClassNames} from 'bluecore-classnames';

@ClassNames
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {hovered: true};
  }

  render() {
    return (
      <div className={cx('base')}>
        <div className={cx('inner')}>
          <div className={cx('first', ['active'])}>
          <div className>={cx('second', {hovered: this.state.hovered})}</div>
        </div>
      </div>
    );
  }
}

export default MyComponent

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'
{div} = React.DOM
{cx, ClassNames} = require 'bluecore-classnames/index.coffee'

class MyComponent extends ClassNames React.Component
  constructor: (props) ->
    super props
    @state = hovered: true

  _render: ->
    div className: cx('base'),
      div className: cx('inner'),
        div className: cx('first', ['active'])
        div className: cx('second', hovered: @state.hovered)

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:

import {Compiler} from 'bluecore-classnames';
Compiler.setDefaults({
  isStrict: false,
  elementDelimeter: '-',
  modifierDelimeter: '__'
});

If decorator found classNames with <string> type it treats them as usual classNames.

import {Compiler} from 'bluecore-classnames';
Compiler.setDefaults({isStrict: false});

will make compiler to treat string classNames as element, so code below will work too:

<div className={'base'}>
  <div className={'inner'}>
    <div className={cx('first', ['active'])}>
    <div className>={cx('second', {hovered: this.state.hovered})}</div>
  </div>
</div>

or you can pass config directly to decorator:

@ClassNames({isStrict: false})
class MyComponent extends React.Component {
  ...
}

License: MIT