This example shows the difference between classNames, classNames/bind and classnames-loader

classnames-loader-example.js

// This example shows the difference
// between classNames, classNames/bind and classnames-loader


// submit-button.css
/*
:local .className {
  color: green;
  background: red;
}

:local .active {
    background: blue;
}

:local .otherClassName {
  color: yellow;
}
*/

// Without classNames bind

import React, { Component } from 'react';
import classNames from 'classNames';
import styles from './submit-button.css';

export default class SubmitButton extends Component {
  render () {
    const { submissionInProgress, active } = this.props;

    const text = submissionInProgress ? 'Processing...' : 'Submit';

    const buttonClassNames = classNames('someGlobalClass', styles.className, { [styles.active]: active })

    return (
        <button className={buttonClassNames}>
            <span className={styles.otherClassName}>
                {text}
            </span>
        </button>
    );
  } 
}

// With classNames bind

import React, { Component } from 'react';
import classNames from 'classNames/bind'; // bind variant
import styles from './submit-button.css';

const cx = classNames.bind(styles);

export default class SubmitButton extends Component {
  render () {
    const { submissionInProgress, active } = this.props;

    const text = submissionInProgress ? 'Processing...' : 'Submit';

    return (
        <button className={cx('someGlobalClass', 'className', { active })}>
            <span className={cx('otherClassName')}>
                {text}
            </span>
        </button>
    );
  } 
}

// With classnames-loader

import React, { Component } from 'react';
import cx from './submit-button.css';

export default class SubmitButton extends Component {
  render () {
    const { submissionInProgress, active } = this.props;

    const text = submissionInProgress ? 'Processing...' : 'Submit';

    return (
        <button className={cx('someGlobalClass', 'className', { active })}>
            <span className={cx('otherClassName')}>
                {text}
            </span>
        </button>
    );
  } 
}