babel-plugin-classnames

Never import classnames again! Converts arrays of classnames to a call of a function of your choice.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-classnames
0.2.04 years ago4 years agoMinified + gzip package size for babel-plugin-classnames in KB

Readme

babel-plugin-classnames for JSX
Build Status
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"
    }]
  ]
}