[React] Using the classnames library for conditional CSS

Classnames is a simple yet versatile javascript utility that joins CSS class names based on a set of conditions. We are going to build a simple toggle switch that relies on state to determine what CSS classes will be applied.

//className = require('classnames')

const className = window.classNames;

class ClassnamesExample extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      isOn: false

    };

  }

  toggleState = () => { this.setState({isOn: !this.state.isOn}); }

  render() {

    const circleClasses = className({

      circle: true,

      off: !this.state.isOn,

      on: this.state.isOn

    });

    const textClasses = className({

      textOff: !this.state.isOn

    })

    console.log(circleClasses);

  //    <div className="circle off"></div>

  //    <span className="textOff">{this.state.isOn ? 'ON' : 'OFF' }</span>

    return (

      <div onClick={this.toggleState}>

        <div className={circleClasses}></div>

        <span className={textClasses}>{this.state.isOn ? 'ON' : 'OFF' }</span>

      </div>

    );

  }

}

window.onload = () => { ReactDOM.render(<ClassnamesExample/>, document.getElementById('app')); }

to JsBin