Webpack loader to automatically bind css-modules to classnames
npm install 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
``
npm install --save-dev classnames-loader
To enable this loader add classnames before style loader in webpack config:
`js`
{
test: /\.css$/,
loader: 'classnames!style!css')
}
If you're using ExtractTextPlugin your webpack config should look like this:
`js`
{
test: /\.css$/,
loaders: ['classnames', ExtractTextPlugin.extract('style', 'css')])
}
Example usage in component:
`js
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 ;
}
}
`
You can also access the class names just as you would do that with css-modules:
`js
import { Component } from 'react';
import styles from './submit-button.css';
export default class SubmitButton extends Component {
render () {
let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
return ;
}
}
``
@JedWatson for classnames module