classnames-loader

classnames-loader

This is a webpack loader that automatically bind css-modules to classnames.

If you are using css-modules, or a similar approach to abstract class "names" and the real className values that are actually output to the DOM, you may want to use the bind variant of classnames module.

Installation

npm install --save-dev classnames-loader

Usage

To enable this loader add classnames before style loader in webpack config:

{
  test: /\.css$/,
  loader: 'classnames!style!css')
}

Example usage in component:

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

export default class SubmitButton extends Component {
  render () {
    let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
    let className = cx({
      base: true,
      inProgress: this.props.store.submissionInProgress,
      error: this.props.store.errorOccurred,
      disabled: this.props.form.valid,
    });
    return <button className={className}>{text}</button>;
  } 
}

Thanks

@JedWatson for classnames module

License

MIT