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.

Check out this example that shows the difference between classNames, classNames/bind and classnames-loader

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')}

If you're using ExtractTextPlugin your webpack config should look like this:

{test: /\.css$/,loaders: ['classnames',ExtractTextPlugin.extract('style','css')])}

Example usage in component:

import{Component}from'react';importcxfrom'./submit-button.css';exportdefaultclassSubmitButtonextendsComponent{render(){lettext=this.props.store.submissionInProgress ? 'Processing...' : 'Submit';letclassName=cx({base: true,inProgress: this.props.store.submissionInProgress,error: this.props.store.errorOccurred,disabled: !this.props.form.valid,});return<buttonclassName={className}>{text}</button>;}}

You can also access the class names just as you would do that with css-modules:

import{Component}from'react';importstylesfrom'./submit-button.css';exportdefaultclassSubmitButtonextendsComponent{render(){lettext=this.props.store.submissionInProgress ? 'Processing...' : 'Submit';return<buttonclassName={styles.submitButton}>{text}</button>;}}

Thanks

@JedWatson for classnames module

License

MIT