Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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}>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.