Multiple classNames with CSS Modules and React

I wanted to just add on a better way of using the bind api of classnames npm. You can bind the classnames to the styles object imported from css like below:

import classNames from 'classnames/bind';
import styles from './index.css';

let cx = classNames.bind(styles);

and use it like this:

cx("sideMenu", "active": isOpen)

where sideMenu and active are in styles object.

Bit late to the party here, but using string templates works for me - you could move the ternary operator out to a const if you'd like as well:

<div className={`${styles.sideMenu} ${this.props.menuOpen ? styles.inactive : styles.active}`>
...
</div>

Using classnames and es6:

let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });

Using classnames and es5:

var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');