babel-plugin-classnames for JSX
Never import classnames again! Converts arrays of classnames to a call of a function of your choice.
<div className={['btn', props.large && 'large']} />
import _classNames from 'classnames'
<div className={_classNames('btn', props.large && 'large')} />
By default imports from classnames
. However the package name is configurable.
Installation
npm i --save-dev babel-plugin-classnames
Then add the plugin to your .babelrc
file:
{
"plugins": [
"@babel/plugin-syntax-jsx",
"babel-plugin-classnames"
]
}
Configuring the package and import name
You can set the package name by defining the packageName
option:
{
"plugins": [
["babel-plugin-classnames", { "packageName": "dss-classnames" }]
]
}
If the function you want to use is not the default package export you can use the importName
option:
{
"plugins": [
["babel-plugin-classnames", {
"packageName": "emotion",
"importName": "cx"
}]
]
}
If you want objects to be transformed, you can opt into it with the transformObjects
option:
{
"plugins": [
["babel-plugin-classnames", { "transformObjects": true }]
]
}
With this option enabled this:
<div className={{ btn: true, large: props.large }} />
becomes:
import _classNames from 'classnames'
<div className={_classNames({ btn: true, large: props.large })} />