Allow classSet to take an arbitrary number of arguments, support string in addition

[braco]

classSet is very handy. As a recap,

classes = React.addons.classSet({ foo: true, bar: false }); // = "foo"

However, because it seems fairly common that you'd want to pass down a className in props:

<MyCustomComponent className="baz">

One ends up writing something like this:

classes = React.addons.classSet({ foo: true, bar: false });
classes += " "+this.props.className

wouldn't it be nice if this was possible?:

React.addons.classSet({ foo: true, bar: false }, "custom-class", this.props.className); // = "foo custom-class ..."

Related:
#1198
#1830

[bloodyowl]

agreed, it would be nice to have an implementation like this :

var arrayPush = Array.prototype.push;

function cx() {
  var index = -1;
  var length = arguments.length;
  var classNameSoFar = [];
  while (++index < length) {
    var item = arguments[index];
    if(item == null) {
      continue;
    }
    if (typeof item == 'object') {
      arrayPush.apply(
        classNameSoFar,
        Object.keys(item)
          .filter(function(className) {
            return item[className];
          })
      )
      continue;
    }
    if(typeof item == 'string') {
      classNameSoFar.push(item);
    }
  }
  return classNameSoFar.join(' ')
}

although I'd rather like a jstransform that would let us do :

cx({
  foo : true,
  bar : false,
  [customClass] : true,
  ...this.props.className
})

[syranide]

It's just courtesy addon, feel free to fork and improve. I believe the intent of classSet is to be compatible with CSS selector minification, that is not compatible with dynamic class names.

[mbrio]

Hey guys, just putting in my implementation here, I've utilized all of the tools within React to handle the multi-argument issue:

classSet = (args...) ->
  classNameDefinition = {}

  for arg in args
    if 'string' is typeof arg
      classNameDefinition[key] = true for key in arg.split ' '
    else if 'object' is typeof arg
      classNameDefinition = React.addons.update classNameDefinition, { $merge: arg }

  React.addons.classSet classNameDefinition

In the above code the arguments can be passed any number of strings, strings with spaces, or objects and have all of the data merged using React's classSet and update addons.

classSet 'btn', 'btn-blue form-element', { toggled: true }

[zpao]

This has come up before. Right now we're just exposing a stub implementation of cx, which internally gets statically transformed to string concatenation. So far I've wanted to keep these things in sync so that we don't have diverging patterns. So because of that, I'll close this out.

A more generic classSet is totally writable and I would support people publishing their own / better impl on npm and then perhaps deprecating the one we expose.