React Classname Mixin

react-classname-mixin.js

"use strict";

import React from 'react/addons';
var cx = React.addons.classSet;


var ClassNameMixin = {
  propTypes: {
    className: React.PropTypes.string
  },

  getClassSet: function(classes) {
    classes = classes || {};

    if (this.props.className) {
      classes[this.props.className] = true;
    }
    return cx(classes);
  }
};

export default ClassNameMixin;

usage.jsx

import React from 'react/addons';

import ClassNameMixin from './ClassNameMixin';


var Button = React.createClass({
  mixins: [ClassNameMixin],
  
  render: function() {
    var classes = {
      'Button': true,
      'Button--primary': true
    };
    
    return (
      <button className={this.getClassSet({classes})}>{this.props.children}</button>
    );
  }
});

var Form = React.createClass({
  render: function() {
    return (
      <form>
        <Button className="Button--small">Click Me!</Button>
      </form>
    );
    
    // you can also pass the result of a class set
    
    var classes = {
      'Button--small': true
    };
    var cx = React.addons.classSet;
    
    return (
      <form>
        <Button className={cx(classes)}>Click Me!</Button>
      </form>
    );
  }
});