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"
}]
]
}