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

// 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>
);

} }