@knoopx/babel-plugin-jsx-classnames

babel plugin to automatically wrap `className` attribute into a `classNames()` call

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@knoopx/babel-plugin-jsx-classnames
2.0.08 months ago5 years agoMinified + gzip package size for @knoopx/babel-plugin-jsx-classnames in KB

Readme

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