Skip to content

Instantly share code, notes, and snippets.

@matthewoden
Created June 25, 2015 15:52
Show Gist options
  • Save matthewoden/8aa872529157b5669696 to your computer and use it in GitHub Desktop.
Save matthewoden/8aa872529157b5669696 to your computer and use it in GitHub Desktop.
Dynamic classnames for react and react native.
/*
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>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment