@knoopx/babel-plugin-jsx-classnames

babel-plugin-jsx-classnames

transform

<div className={arrayOrObjectExpr}></div>

to

<div className={classNames(arrayOrObjectExpr)}></div>

why

with react

<button className={`${active ? 'btn-active' : ''} ${disabled ? 'btn-disabled' : ''}`}>
</button>

with classnames

<button
  className={classNames({
    'btn-active': active,
    'btn-disabled': disabled,
  })}>
</button>

with babel-plugin-jsx-classnames

<button
  className={{
    'btn-active': active,
    'btn-disabled': disabled,
  }}>
</button>

usage

npm i babel-plugin-jsx-classnames --save-dev

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    ...
    "jsx-classnames"
  ]
}