babel-plugin-classnames

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 classname. 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 name

You can set the package name by defining the packageName options:

{
  "plugins": [
    ["babel-plugin-classnames", { "packageName": "dss-classname" }]
  ]
}