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:
{
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';
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>;
}
}You can also access the class names just as you would do that with css-modules:
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 <button className={styles.submitButton}>{text}</button>;
}
}@JedWatson for classnames module
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent