Dynamic classnames for react and react native.

useClassnames.js

/*
  This is a real simple pattern that allows you to 
  maintain a syntax similar to classnames, but use 
  CSS Module mode in webpack. 
  (solving the problem of cleanly using object properies as keys)
*/


function use(result, conditions){
  /*
    if conditions are met, and we have a result,
    apply the result.
  */
  if(result && conditions){
    return result;
  } else {
    return false;
  }
} 
...
export default class Example extends React.Component {

render () {

    var classes = classNames(styles.main,
      use(styles.pristine, this.props.pristine),
      use(styles.invalid, this.props.invalid),
      use(styles.disabled, this.props.disabled && this.props.pristine)
    );
    return (
      <div className={classes}>
        {this.props.text}
      </div>
      );
  }