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 })} />